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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

3回答

2501閲覧

javascriptで追加したメニューにonChangeを加えたいです

hain

総合スコア25

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/09/07 11:35

編集2017/09/07 11:55

###前提・実現したいこと
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

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

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

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

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

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

kei344

2017/09/07 11:36

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答3

0

var HTML1 = '<form name="syumo' + counter + '">\n' +//変更 '<select id="shumoku" name="syumok" onchange="imgChange();">\n' + '<option value="0">aaa</option>\n' + '<option value="1">bbb</option>\n' + '<option value="2">ccc</option>\n' + '<option value="3">ddd</option>\n' + '<option value="4">eee</option>\n' + '<option value="5">fff</option>\n' + //変更 '</select></form>';//追加

フォームがきちんと閉じられていませんでしたので、これでどうでしょう。
ただし、idは一意の値になるべきですので、ループ内で複数作成する場合はidもその数だけ変えるべきです。

投稿2017/09/08 04:38

namimon

総合スコア726

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

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

0

'<select id="shumoku name="syumok onchange="imgChange();>\n' +

'<select id="shumoku" name="syumok" onchange="imgChange();">\n' +
が正しいのでないでしょうか。
これが関係しているような。

投稿2017/09/07 11:40

unau

総合スコア2468

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

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

hain

2017/09/07 11:46

アドバイスありがとうございます。変更してみたところやはり巻子が呼び出されることはありませんでした…すみません!ありがとうございました!
guest

0

ベストアンサー

流れ的にはこんな感じでどうでしょうか?

css

1/*formが幅をとるのでとりあえずinlineにしておく*/ 2form{display:inline}

script

1/*セレクトボックスから呼び出す関数、内容はダミー*/ 2function imgChange(){ 3 console.log("call imgchange"); 4} 5/*ボタンを押すと呼び出される関数 テーブルに行を追加*/ 6function AddTableRows(){ 7 /*挿入したいテーブルのtbodyを"t"とする*/ 8 var t = document.querySelector("#table1 tbody"); 9 /*挿入したい行を"row"とし、"row"を"t"に挿入する*/ 10 var row = document.createElement("tr"); 11 t.appendChild(row); 12 /*挿入したいセルを"cell"とし、"cell"を"row"に挿入する*/ 13 var cell = document.createElement("td"); 14 row.appendChild(cell); 15 /*"cell"にクラス"syu"を追加する*/ 16 cell.classList.add("syu"); 17 /*挿入したいセルを"f"とし、"f"を"cell"に挿入する*/ 18 var f = document.createElement("form"); 19 cell.appendChild(f); 20 /*挿入したいセレクトボックスを"s"とし、"s"を"f"に挿入する*/ 21 var s = document.createElement("select"); 22 f.appendChild(s); 23 /*"s"に、"shumoku"というnameを設定する*/ 24 s.setAttribute("name","shumoku"); 25 /*"s"に、onchange時に実行する関数imgChangeを設定する*/ 26 s.addEventListener("change",function(){imgChange();}); 27 /*セレクトボックスに入れるoptionのvalueとテキストの一覧を作っておいて*/ 28 [ 29 {value:0,text:"aaa"}, 30 {value:1,text:"bbb"}, 31 {value:2,text:"ccc"}, 32 {value:3,text:"ddd"}, 33 {value:4,text:"eee"}, 34 {value:5,text:"fff"}, 35 /*mapをつかって一覧の頭から順番に処理*/ 36 ].map(function(i){ 37 /*挿入したいオプションを"o"とし、"o"を"s"に挿入する*/ 38 var o = document.createElement("option"); 39 s.appendChild(o); 40 /*oのvalueに一覧から受け取ったオブジェクト"i"のvalue値を設定する*/ 41 o.setAttribute("value",i.value); 42 /*oのテキストに一覧から受け取ったオブジェクト"i"のtext値を設定する*/ 43 o.appendChild(document.createTextNode(i.text)); 44 }); 45}

HTML

1<input type="button" value="add row" onclick="AddTableRows()"> 2<table id="table1"> 3<thead> 4<tr> 5<th>test</th> 6</tr> 7</thead> 8<tbody> 9</tbody> 10</table>

投稿2017/09/07 12:34

編集2017/09/08 00:50
yambejp

総合スコア114572

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

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

hain

2017/09/07 13:02

ごかいとうありがとうございます! 細かいところまで書いていただいて大変ありがたいのですがjavascriptの内部がどのようになっているか(使っている構文など)教えていただけないでしょうか…お手数おかけしてすみません
yambejp

2017/09/08 00:50

本文に解説をつけておきました わからない箇所があればきいてください
hain

2017/09/08 12:05

ありがとうございます!とても分かりやすく、感謝しかありません…!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問