回答編集履歴

2

修正

2019/01/17 06:48

投稿

papinianus
papinianus

スコア12705

test CHANGED
@@ -18,16 +18,6 @@
18
18
 
19
19
  add_calendar(wrapper, year, month);
20
20
 
21
-
22
-
23
- document.querySelectorAll("td").forEach(function (target) {
24
-
25
- // 引数targetにはdiv要素が1つずつ渡されている
26
-
27
- target.addEventListener('click', handler);
28
-
29
- });
30
-
31
21
  }
32
22
 
33
23
 
@@ -42,6 +32,52 @@
42
32
 
43
33
  }
44
34
 
35
+ /**
36
+
37
+ * 指定した年月のカレンダーを表示する
38
+
39
+ * @param {object} wrapper - カレンダーを追加する親要素
40
+
41
+ * @param {number} year - 年の指定
42
+
43
+ * @param {number} month - 月の指定
44
+
45
+ */
46
+
47
+ function add_calendar(wrapper, year, month) {
48
+
49
+ // 現在カレンダーが追加されている場合は一旦削除する
50
+
51
+ wrapper.textContent = null;
52
+
53
+
54
+
55
+ // カレンダーに表示する内容を取得
56
+
57
+ var headData = generate_calendar_header(wrapper, year, month);
58
+
59
+ var bodyData = generate_month_calendar(year, month);
60
+
61
+
62
+
63
+ // カレンダーの要素を追加
64
+
65
+ wrapper.appendChild(headData);
66
+
67
+ wrapper.appendChild(bodyData);
68
+
69
+ document.querySelectorAll("td").forEach(function (target) {
70
+
71
+ // 引数targetにはdiv要素が1つずつ渡されている
72
+
73
+ target.addEventListener('click', handler);
74
+
75
+ });
76
+
77
+ }
78
+
79
+
80
+
45
81
  ```
46
82
 
47
83
  いちおうこう書いたものの、カスタムデータ属性などを使って、inputに設定したい値をtdにもっておいたほうがいい気がします。

1

修正

2019/01/17 06:48

投稿

papinianus
papinianus

スコア12705

test CHANGED
@@ -20,27 +20,25 @@
20
20
 
21
21
 
22
22
 
23
- /* こういうイベントリスナを設定しましょう */
23
+ document.querySelectorAll("td").forEach(function (target) {
24
24
 
25
- document.querySelectorAll("td").forEach(function (target) {
25
+ // 引数targetにはdiv要素が1つずつ渡されている
26
26
 
27
27
  target.addEventListener('click', handler);
28
28
 
29
29
  });
30
30
 
31
- /* */
32
-
33
31
  }
34
32
 
35
33
 
36
-
37
- /* handlerは、とりあえずログを出すだけです。「取得」の質問なので、inputへの設定は自分でできると想定 */
38
34
 
39
35
  function handler(e) {
40
36
 
41
37
  if(e.target.innerText === "") return;
42
38
 
43
- console.log(e.target.innerText);
39
+ const yearmonth = document.querySelector(".calendar-header__title").innerText;
40
+
41
+ document.querySelector("input").value = yearmonth + e.target.innerText + "日";
44
42
 
45
43
  }
46
44
 
@@ -49,3 +47,7 @@
49
47
  いちおうこう書いたものの、カスタムデータ属性などを使って、inputに設定したい値をtdにもっておいたほうがいい気がします。
50
48
 
51
49
  (もちろん、年月を表示しているところから取ってもいいんですが)
50
+
51
+
52
+
53
+ querySelectorを雑につかってるので、クラスとかタグ名とかで引かずにすむように、取りたい場所やセットしたい場所には適切なidを付与することを推奨します。