###前提・実現したいこと
MonecaでHTMLとjavascriptを用いてアプリを作っています。
ドロップダウンのメニューを追加ボタンを用いて動的に生成しています。
生成したメニューについてもOnchangeをつけたいのですが、試した方法ではうまくいかず、困っています。
お力添えのほどよろしくお願いいたします
###ドロップダウンメニュー追加用のスクリプトです。
Javascript
1<script> 2 var counter = 0; 3function AddTableRows(){ 4 // カウンタを回す 5 counter++; 6 7 var table1 = document.getElementById("table1"); 8 var row1 = table1.insertRow(counter); 9 var cell1 = row1.insertCell(0); 10 11 // class の付与は UserAgent によって 12 // 挙動が違うっぽいので念のため両方の方法で 13 cell1.setAttribute("class","syu"); 14 cell1.className = 'syu'; 15 16 var HTML1 = '<form name="syumo" ' + counter + '">\n' + 17 '<select id="shumoku" name="syumok" onchange="imgChange();">\n' + 18 '<option value="0">aaa</option>\n' + 19 '<option value="1">bbb</option>\n' + 20 '<option value="2">ccc</option>\n' + 21 '<option value="3">ddd</option>\n' + 22 '<option value="4">eee</option>\n' + 23 '<option value="5">fff</option>'; 24 25 cell1.innerHTML = HTML1; 26} 27</script>
上記のスクリプトのでドロップダウンメニューを追加しています。
HTML
1<form name="syumo"> 2 <select id="shumoku" name="syumok" onchange="imgChange();"> 3 <option value="0">aaa</option> 4 <option value="1">bbb</option> 5 <option value="2">ccc</option> 6 <option value="3">ddd</option> 7 <option value="4">eee</option> 8 <option value="5">fff</option> 9 </select> 10 </form>
上記のスクリプトはonchangeによって関数を呼び出し、実行することができました。
画面上部にある追加ボタンを押すことで
初めからあるドロップダウンメニュー(HTML内のもの)の下に新たに動的に生成(javascriptで呼び出したもの)しています。
###試したこと
Javascript内でvar=HTML1のselectタグの中に入れてみましたが関数を呼び出せませんでした
その際に、
TypeError: undefined is not an object (evaluating 'document.syumo.syumok.options[num]')
というエラーが出てしまします。
Javascript
1<script> 2function AddTableRows(){ 3 // カウンタを回す 4 counter++; 5 6 var table1 = document.getElementById("table1"); 7 var row1 = table1.insertRow(counter); 8 var cell1 = row1.insertCell(0); 9 10 // class の付与は UserAgent によって 11 // 挙動が違うっぽいので念のため両方の方法で 12 cell1.setAttribute("class","syu"); 13 cell1.className = 'syu'; 14 15 var HTML1 = '<form name="syumo" ' + counter + '">\n' + 16 '<select id="shumoku" name="syumok" onchange="imgChange();">\n' + 17 '<option value="0">aaa</option>\n' + 18 '<option value="1">bbb</option>\n' + 19 '<option value="2">ccc</option>\n' + 20 '<option value="3">ddd</option>\n' + 21 '<option value="4">eee</option>\n' + 22 '<option value="5">fff</option>'; 23 24 cell1.innerHTML = HTML1; 25} 26</script>
###補足情報
参考にさせていただいたサイト様
https://www.mdn.co.jp/webcre/Tips/Vol12/js_imagechange02.html
http://www.abe-tatsuya.com/web_prog/javascript/add_table_rows.php
回答3件
あなたの回答
tips
プレビュー