質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

4001閲覧

appendChildをfor文の中で使用しようとするとエラーが出る js, for(), appendChild(), createElement()

Tamaki

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/05/09 08:25

編集2018/05/09 09:45

前提・実現したいこと>

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でちゃんとした要素が読み込まれていない。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/09 08:29

プログラムコード(およびエラーメッセージ)は```で囲ってください。(わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください)正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。
guest

回答3

0

ベストアンサー

form name="count"のelementに対して0から5番まで処理をするということは6個
チェックしているということです。
実際にはinput要素は5個しか無いので、少なくとも6個めの処理をするときにエラーになります
正直なにをトリガーにどうしたいのかわかりづらいですが
チェックボックスを付けたり消したりするたびに
imgを付加したり削除したりすればいいのならこんな感じですかね

javascript

1 2<script> 3HTMLElement.prototype.trigger=function(eventStr){ 4 if (document.createEvent) { 5 var e = document.createEvent("HTMLEvents"); 6 e.initEvent(eventStr, true, true ); 7 return this.dispatchEvent(e); 8 } else { 9 var e = document.createEventObject(); 10 return this.fireEvent("on"+eventStr, e); 11 } 12}; 13document.addEventListener('change',function(e){ 14 var t=e.target; 15 if(t.nodeName=="INPUT" && t.type=="checkbox" && t.form.name=="count"){ 16 [].forEach.call(t.form.querySelectorAll("input[type=checkbox]"),function(x,y){ 17 if(z=document.querySelector("[name=whole] [src='player"+(y+1)+".png']")){ 18 document.querySelector("[name=whole]").removeChild(z); 19 } 20 if(x.checked){ 21 var b =document.createElement("img"); 22 b.setAttribute("src","player"+(y+1)+".png"); 23 b.classList.add("absolute","players"); 24 document.querySelector("[name=whole]").appendChild(b); 25 } 26 }); 27 }; 28}); 29window.addEventListener('DOMContentLoaded', function(e){ 30 document.querySelector("#pnum1").trigger("change"); 31}); 32 33</script> 34 35<div name="whole" class="box"> 36<form name="count"> 37<p>Please check if you're playing!</p> 38<span>Player1</span><input id="pnum1" type="checkbox"><br> 39<span>Player2</span><input id="pnum2" type="checkbox"><br> 40<span>Player3</span><input id="pnum3" type="checkbox"><br> 41<span>Player4</span><input id="pnum4" type="checkbox"><br> 42<span>Player5</span><input id="pnum5" type="checkbox"><br> 43</form> 44</div>

投稿2018/05/09 10:19

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

質問がどれか曖昧なので2つ

  1. documentにwholeがない

wholeはdivのnameにすぎず、取得するコードをかく必要があります。自動的にdocument.wholeに読み込まれたりはしないと思います。
2. iは0からはじまる
document.getElementById("you"+i);のiは0からはじまるようです。"you"+iはyou0となるように思いますが、これが意図した動作だとは思えません。

投稿2018/05/09 09:10

papinianus

総合スコア12705

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tamaki

2018/05/09 09:35 編集

な、なんと! そうだったんですね。今までfor文を使っていて、何故思い通りに動いていたか謎です...... 画像ファイルを改名し、nameではなくidで読み込み、直してみました。(変更後のスクリプトは質問、該当のソースコードにて) すると、画像は作られましたが、反映されているのはsrcのみで、classは無く、さらには以下のようなエラーも出てきました。 Uncaught TypeError: Cannot read property 'checked' of undefined
guest

0

document.whole.appendChild(b); //此処でエラーが発生

「document」というオブジェクトに「whole」などというプロパティがないから、アクセス不能なのです。

<div name="whole" class="box">

↑これを取得したいなら、「document.getElementsByName("whole")[0]」を使用する必要があります。

document.getElementsByName - Web API インターフェイス | MDN

投稿2018/05/09 08:55

tkturbo

総合スコア5572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tamaki

2018/05/09 09:41

そうだったんですね! 編集しました! ですが、またエラーが......
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問