teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問appendChildをfor文の中で使用しようとするとエラーが出る js, for(), appendChild(), createElement()

編集履歴

質問編集履歴

6

改善

2018/05/09 09:46

投稿

Tamaki
Tamaki

スコア7

test CHANGED
File without changes
test CHANGED
@@ -58,31 +58,35 @@
58
58
 
59
59
  編集後
60
60
 
61
- function addplayer(){
61
+ function addplayer(){
62
62
 
63
- var a = document.getElementById("count");
63
+ var a = document.getElementsByName("count");
64
64
 
65
- var c = document.getElementById("whole");
65
+ var c = document.getElementById("wholegame");
66
66
 
67
- for(i = 0; i <= 5; i++){
67
+ for(i = 0; i <= 5; i++){
68
68
 
69
- if(a.elements[i].checked){
69
+ if(a[i].checked){
70
70
 
71
- var b =　document.createElement("img");
71
+ var b =　document.createElement("img");
72
72
 
73
- b.src = "player"+i+".png";
73
+ b.src = "player1.png";
74
74
 
75
- b.class ="absolute players";
75
+ b.class ="absolute players";
76
76
 
77
- c.appendChild(b);
77
+ c.appendChild(b);　
78
78
 
79
- }
79
+ }
80
80
 
81
- }
81
+ else{}
82
82
 
83
- a.style.display = "none";
83
+ }
84
84
 
85
+ a.style.display = "none";
86
+
85
- }
87
+ }
88
+
89
+
86
90
 
87
91
  ```
88
92
 

5

改善後のエラーを追加

2018/05/09 09:45

投稿

Tamaki
Tamaki

スコア7

test CHANGED
File without changes
test CHANGED
@@ -34,13 +34,21 @@
34
34
 
35
35
 
36
36
 
37
+ ```error
38
+
37
- ```エラー
39
+ 編集前のエラー
38
40
 
39
41
  Uncaught TypeError: Cannot read property 'appendChild' of undefined
40
42
 
41
43
  ```
42
44
 
45
+ ```
43
46
 
47
+ 編集後のエラー
48
+
49
+ Uncaught TypeError: Cannot read property 'checked' of undefined
50
+
51
+ ```
44
52
 
45
53
  ### 該当のソースコード
46
54
 

4

改善

2018/05/09 09:43

投稿

Tamaki
Tamaki

スコア7

test CHANGED
File without changes
test CHANGED
@@ -44,7 +44,45 @@
44
44
 
45
45
  ### 該当のソースコード
46
46
 
47
+
48
+
49
+ ```js
50
+
51
+ 編集後
52
+
53
+ function addplayer(){
54
+
55
+ var a = document.getElementById("count");
56
+
57
+ var c = document.getElementById("whole");
58
+
59
+ for(i = 0; i <= 5; i++){
60
+
61
+ if(a.elements[i].checked){
62
+
63
+ var b =　document.createElement("img");
64
+
65
+ b.src = "player"+i+".png";
66
+
67
+ b.class ="absolute players";
68
+
69
+ c.appendChild(b);
70
+
71
+ }
72
+
73
+ }
74
+
75
+ a.style.display = "none";
76
+
77
+ }
78
+
79
+ ```
80
+
81
+
82
+
47
83
  ```javascript
84
+
85
+ 編集前
48
86
 
49
87
  function addplayer(){
50
88
 
@@ -71,6 +109,10 @@
71
109
  }
72
110
 
73
111
  ```
112
+
113
+
114
+
115
+
74
116
 
75
117
  ### 試したこと
76
118
 

3

タイトルの変更

2018/05/09 09:33

投稿

Tamaki
Tamaki

スコア7

test CHANGED
@@ -1 +1 @@
1
- どうしてエラーが発生するのか？ js, for(), appendChild(), createElement()
1
+ appendChildをfor文の中で使用しようとするとエラーが出る js, for(), appendChild(), createElement()
test CHANGED
@@ -1,4 +1,4 @@
1
- ### 前提・実現したいこと
1
+ ### 前提・実現したいこと>
2
2
 
3
3
  ```html
4
4
 

2

書き忘れ

2018/05/09 09:30

投稿

Tamaki
Tamaki

スコア7

test CHANGED
File without changes
test CHANGED
@@ -2,21 +2,25 @@
2
2
 
3
3
  ```html
4
4
 
5
- <form name="count">
5
+ <div name="whole" class="box">
6
6
 
7
- <p>Please check if you're playing!</p>
7
+ 　<form name="count">
8
8
 
9
- <span>Player1</span><input id="pnum1" type="checkbox"><br>
9
+ 　　<p>Please check if you're playing!</p>
10
10
 
11
- <span>Player2</span><input id="pnum2" type="checkbox"><br>
11
+ 　　<span>Player1</span><input id="pnum1" type="checkbox"><br>
12
12
 
13
- <span>Player3</span><input id="pnum3" type="checkbox"><br>
13
+ 　　<span>Player2</span><input id="pnum2" type="checkbox"><br>
14
14
 
15
- <span>Player4</span><input id="pnum4" type="checkbox"><br>
15
+ 　　<span>Player3</span><input id="pnum3" type="checkbox"><br>
16
16
 
17
- <span>Player5</span><input id="pnum5" type="checkbox"><br>
17
+ 　　<span>Player4</span><input id="pnum4" type="checkbox"><br>
18
18
 
19
+ 　　<span>Player5</span><input id="pnum5" type="checkbox"><br>
20
+
19
- </form>
21
+ 　</form>
22
+
23
+ </div>
20
24
 
21
25
  ```
22
26
 
@@ -44,25 +48,25 @@
44
48
 
45
49
  function addplayer(){
46
50
 
47
- var a = document.getElementById("count");
51
+ 　var a = document.getElementById("count");
48
52
 
49
- for(i = 0; i <= 5; i++){
53
+ 　for(i = 0; i <= 5; i++){
50
54
 
51
- if(document.count.elements[i].checked){
55
+ 　　if(document.count.elements[i].checked){
52
56
 
53
- var b =　document.createElement("img");
57
+ 　　　var b =　document.createElement("img");
54
58
 
55
- b.src = "player"+i+".png";
59
+ 　　　b.src = "player"+i+".png";
56
60
 
57
- b.class ="absolute players";
61
+ 　　　b.class ="absolute players";
58
62
 
59
- document.whole.appendChild(b);　//此処でエラーが発生
63
+ 　　　document.whole.appendChild(b);　//此処でエラーが発生
60
64
 
61
- }
65
+ 　　}
62
66
 
63
- }
67
+ 　}
64
68
 
65
- a.style.display = "none";
69
+ 　a.style.display = "none";
66
70
 
67
71
  }
68
72
 

1

```で囲いました。申し訳ありません。

2018/05/09 08:38

投稿

Tamaki
Tamaki

スコア7

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
-
3
+ ```html
4
4
 
5
5
  <form name="count">
6
6
 
@@ -18,7 +18,7 @@
18
18
 
19
19
  </form>
20
20
 
21
-
21
+ ```
22
22
 
23
23
  チェックされた箇所の情報を読み取り、対応した画像を表示したい。
24
24
 
@@ -30,13 +30,17 @@
30
30
 
31
31
 
32
32
 
33
+ ```エラー
34
+
33
35
  Uncaught TypeError: Cannot read property 'appendChild' of undefined
36
+
37
+ ```
34
38
 
35
39
 
36
40
 
37
41
  ### 該当のソースコード
38
42
 
39
-
43
+ ```javascript
40
44
 
41
45
  function addplayer(){
42
46
 
@@ -62,7 +66,7 @@
62
66
 
63
67
  }
64
68
 
65
-
69
+ ```
66
70
 
67
71
  ### 試したこと
68
72
 
@@ -70,9 +74,17 @@
70
74
 
71
75
  appendChildではなく、元から<img>要素を作っておく。
72
76
 
73
- //class="hidden"にはdisplay:noneのみが書かれている
77
+ ```css
74
78
 
79
+ .absolute{position:absolute;}
75
80
 
81
+ .players{display:none; z-index:2}
82
+
83
+ .hidden{display:none;}
84
+
85
+ ```
86
+
87
+ ```html
76
88
 
77
89
  <img id="you1" class="hidden">
78
90
 
@@ -84,9 +96,13 @@
84
96
 
85
97
  <img id="you5" class="hidden">
86
98
 
99
+ ```
100
+
87
101
 
88
102
 
89
103
  同じくfor文で回し、
104
+
105
+ ```javascript
90
106
 
91
107
  var b = document.getElementById("you"+i);
92
108
 
@@ -94,6 +110,8 @@
94
110
 
95
111
  b.class = "absolute players";
96
112
 
113
+ ```
114
+
97
115
  としたが、関数が最後まで読み込まれなくなった。
98
116
 
99
117
  恐らく、getElementByIdでちゃんとした要素が読み込まれていない。