###前提・実現したいこと
プルダウンメニュー付きのテーブルを1つだけ表示してある画面があります。
そこに動的に同じテーブルを追加します。
テーブル内のプルダウンメニューは画像を表示するもので、onchangeで呼び出しています。
初期設定したプルダウンメニューは画像の変更ができます。
しかし、追加ボタンで動的に生成したプルダウンメニューでは
> TypeError: undefined is not an object (evaluating 'document.syumo.syumok.options[num]')
というエラーが発生してしまいます。
おそらく、初期設定のプルダウンメニューと追加したプルダウンメニューのoption内に同じvalueが存在するため参照がうまくいかないのかな
と考えています。
HTMLを使った初めてのアプリ制作で四苦八苦しております。皆様のお力をお貸しください。
###該当のソースコード
Javascript
1 <script> 2//プルダウンメニュー追加用関数 3 var counter = 0; 4function AddTableRows(){ 5 // カウンタを回す 6 counter++; 7 8 var table1 = document.getElementById("table1"); 9 var row1 = table1.insertRow(counter); 10 var cell1 = row1.insertCell(0); 11 var cell2 = row1.insertCell(1); 12 var cell3 = row1.insertCell(2); 13 var cell4 = row1.insertCell(3); 14 15 // class の付与は UserAgent によって 16 // 挙動が違うっぽいので念のため両方の方法で 17 cell1.setAttribute("class","syu"); 18 cell2.setAttribute("class","omosa"); 19 cell3.setAttribute("class","kaisu"); 20 cell4.setAttribute("class","set"); 21 cell1.className = 'syu'; 22 cell2.className = 'omosa'; 23 cell3.className = 'kaisu'; 24 cell4.className = 'set'; 25 26 var HTML1 = '<form name="syumo" ' + counter + '">\n' + 27 '<select id="shumoku" name="syumok" onchange="imgChange();">\n' + 28 '<option value="0">aaa</option>\n' + 29 '<option value="1">bbb</option>\n' + 30 '<option value="2">ccc</option>\n' + 31 '<option value="3">ddd</option>\n' + 32 '<option value="4">eee</option>\n' + 33 '<option value="5">fff</option>\n' + 34 '<option value="6">ggg</option>\n' + 35 '</select></form>'; 36 37 var HTML2 = '<input type="number" name="omosa' + counter + '" value="" style="width:40px;"/>'; 38 var HTML3 = '<input type="number" name="kaisu ' + counter + '" value="" style="width:40px;"/>'; 39 var HTML4 = '×<input type="number" name="set ' + counter + '" value="" style="width:30px;" />'; 40 41 42 cell1.innerHTML = HTML1; 43 cell2.innerHTML = HTML2; 44 cell3.innerHTML = HTML3; 45 cell4.innerHTML = HTML4; 46} 47 </script>
javascript
1//画像変更 2 <script language="JavaScript"> 3 var img0=new Image(); 4 img0.src="images/000.png"; 5 var img1=new Image(); 6 img1.src="images/111.png"; 7 var img2=new Image(); 8 img2.src="images/222.png"; 9 var img3=new Image(); 10 img3.src="images/333.png"; 11 var img4=new Image(); 12 img4.src="images/444.png"; 13 var img5=new Image(); 14 img5.src="images/555.png"; 15 16 function imgChange(this){ 17 var num = document.syumo.syumok.selectedIndex; 18 var fname = document.syumo.syumok.options[num].value; 19 if(fname==1){document.munen.src=img0.src;} 20 if(fname==2){document.munen.src=img1.src;} 21 if(fname==3){document.soun.src=img2.src;} 22 if(fname==4){document.koun.src=img3.src;} 23 if(fname==5){document.koun.src=img4.src;} 24 if(fname==6){document.koun.src=img5.src;} 25 26 </script>
HTML
1//テーブルを追加するボタン 2<input type="button" value="add row" onclick="AddTableRows()"> 3 4//初期設定したプルダウンメニュー付きテーブル 5 <table id="table1"> 6 <thead id="he"> 7 <tr><th>種目</th><th>負荷</th><th>回数</th><th nowrap>セット</th></tr> 8 </thead><tr> 9 <td class="syu"> 10 <select id="shumoku" name="syumok" onchange="imgChange();"> 11 <option value="0">aaa</option> 12 <option value="1">bbb</option> 13 <option value="2">ccc</option> 14 <option value="3">ddd</option> 15 <option value="4">eee</option> 16 <option value="5">fff</option> 17 <option value="6">ggg</option> 18 </select></td> 19 </form> 20 <td class="omosa" ><input type="number" name="omosa0" value="" style="width:40px;"/></td> 21 <td class="kaisu" ><input type="number" name="kaisu0" value="" style="width:40px;"/></td> 22 <td class="set" nowrap >×<input type="number" name="set0" value="" style="width:30px;" /></td> 23 </tr> 24</table>
###試したこと
・テーブルを追加せず初期設定のプルダウンメニューで選択する
→画像が変更される
・テーブルを追加し、プルダウンメニューで選択する
→初期設定のプルダウンメニュー、追加したプルダウンメニューどちらも画像を変更できない
(上記のエラーコードが出ます)
・初期設定のプルダウンメニューで選択後、新しくテーブルを追加する
→追加目は画像を変更できるが、テーブルを追加した後は初期設定・追加したプルダウン両メニューで画像の変更ができない
(エラーメッセージは上記のもの)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/08 13:48