前提・実現したいこと>
html
1<div name="whole" class="box"> 2 <form name="count"> 3 <p>Please check if you're playing!</p> 4 <span>Player1</span><input id="pnum1" type="checkbox"><br> 5 <span>Player2</span><input id="pnum2" type="checkbox"><br> 6 <span>Player3</span><input id="pnum3" type="checkbox"><br> 7 <span>Player4</span><input id="pnum4" type="checkbox"><br> 8 <span>Player5</span><input id="pnum5" type="checkbox"><br> 9 </form> 10</div>
チェックされた箇所の情報を読み取り、対応した画像を表示したい。
発生している問題・エラーメッセージ
error
1編集前のエラー 2Uncaught TypeError: Cannot read property 'appendChild' of undefined
編集後のエラー Uncaught TypeError: Cannot read property 'checked' of undefined
該当のソースコード
js
1編集後 2 function addplayer(){ 3 var a = document.getElementsByName("count"); 4 var c = document.getElementById("wholegame"); 5 for(i = 0; i <= 5; i++){ 6 if(a[i].checked){ 7 var b = document.createElement("img"); 8 b.src = "player1.png"; 9 b.class ="absolute players"; 10 c.appendChild(b); 11 } 12 else{} 13 } 14 a.style.display = "none"; 15 } 16
javascript
1編集前 2function addplayer(){ 3 var a = document.getElementById("count"); 4 for(i = 0; i <= 5; i++){ 5 if(document.count.elements[i].checked){ 6 var b = document.createElement("img"); 7 b.src = "player"+i+".png"; 8 b.class ="absolute players"; 9 document.whole.appendChild(b); //此処でエラーが発生 10 } 11 } 12 a.style.display = "none"; 13}
試したこと
appendChildではなく、元から<img>要素を作っておく。
css
1.absolute{position:absolute;} 2.players{display:none; z-index:2} 3.hidden{display:none;}
html
1<img id="you1" class="hidden"> 2<img id="you2" class="hidden"> 3<img id="you3" class="hidden"> 4<img id="you4" class="hidden"> 5<img id="you5" class="hidden">
同じくfor文で回し、
javascript
1var b = document.getElementById("you"+i); 2b.src = "player"+i+".png"; 3b.class = "absolute players";
としたが、関数が最後まで読み込まれなくなった。
恐らく、getElementByIdでちゃんとした要素が読み込まれていない。
プログラムコード(およびエラーメッセージ)は```で囲ってください。(わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください)正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。
回答3件
あなたの回答
tips
プレビュー