質問編集履歴｜teratail（テラテイル）

5 エラ-文の追加

hain score 25

2017/09/07 20:55 投稿

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

###前提・実現したいこと

MonecaでHTMLとjavascriptを用いてアプリを作っています。

ドロップダウンのメニューを追加ボタンを用いて動的に生成しています。

生成したメニューについてもOnchangeをつけたいのですが、試した方法ではうまくいかず、困っています。

お力添えのほどよろしくお願いいたします

###ドロップダウンメニュー追加用のスクリプトです。

```Javascript

var counter = 0;

function AddTableRows(){

// カウンタを回す

counter++;

var table1 = document.getElementById("table1");

var row1 = table1.insertRow(counter);

var cell1 = row1.insertCell(0);

// class の付与は UserAgent によって

// 挙動が違うっぽいので念のため両方の方法で

cell1.setAttribute("class","syu");

cell1.className = 'syu';

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>';

cell1.innerHTML = HTML1;

}

</script>

```

上記のスクリプトのでドロップダウンメニューを追加しています。

```HTML

<form>

</select>

</form>

```

上記のスクリプトはonchangeによって関数を呼び出し、実行することができました。

画面上部にある追加ボタンを押すことで

初めからあるドロップダウンメニュー(HTML内のもの)の下に新たに動的に生成(javascriptで呼び出したもの)しています。

###試したこと

Javascript内でvar=HTML1のselectタグの中に入れてみましたが関数を呼び出せませんでした

その際に、

> TypeError: undefined is not an object (evaluating 'document.syumo.syumok.options[num]')

というエラーが出てしまします。

```Javascript

function AddTableRows(){

// カウンタを回す

counter++;

var table1 = document.getElementById("table1");

var row1 = table1.insertRow(counter);

var cell1 = row1.insertCell(0);

// class の付与は UserAgent によって

// 挙動が違うっぽいので念のため両方の方法で

cell1.setAttribute("class","syu");

cell1.className = 'syu';

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>';

cell1.innerHTML = HTML1;

}

</script>

```

###補足情報

参考にさせていただいたサイト様

https://www.mdn.co.jp/webcre/Tips/Vol12/js_imagechange02.html

http://www.abe-tatsuya.com/web_prog/javascript/add_table_rows.php

JavaScript

29433 questions

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

HTML

18193 questions

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

Monaca

1408 questions

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

4 ""の追加

hain score 25

2017/09/07 20:47 投稿

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

###前提・実現したいこと

MonecaでHTMLとjavascriptを用いてアプリを作っています。

ドロップダウンのメニューを追加ボタンを用いて動的に生成しています。

生成したメニューについてもOnchangeをつけたいのですが、試した方法ではうまくいかず、困っています。

お力添えのほどよろしくお願いいたします

###ドロップダウンメニュー追加用のスクリプトです。

```Javascript

var counter = 0;

function AddTableRows(){

// カウンタを回す

counter++;

var table1 = document.getElementById("table1");

var row1 = table1.insertRow(counter);

var cell1 = row1.insertCell(0);

// class の付与は UserAgent によって

// 挙動が違うっぽいので念のため両方の方法で

cell1.setAttribute("class","syu");

cell1.className = 'syu';

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>';

cell1.innerHTML = HTML1;

}

</script>

```

上記のスクリプトのでドロップダウンメニューを追加しています。

```HTML

<form>

</select>

</form>

```

上記のスクリプトはonchangeによって関数を呼び出し、実行することができました。

画面上部にある追加ボタンを押すことで

初めからあるドロップダウンメニュー(HTML内のもの)の下に新たに動的に生成(javascriptで呼び出したもの)しています。

###試したこと

Javascript内でvar=HTML1のselectタグの中に入れてみましたが関数を呼び出せませんでした

```Javascript

function AddTableRows(){

// カウンタを回す

counter++;

var table1 = document.getElementById("table1");

var row1 = table1.insertRow(counter);

var cell1 = row1.insertCell(0);

// class の付与は UserAgent によって

// 挙動が違うっぽいので念のため両方の方法で

cell1.setAttribute("class","syu");

cell1.className = 'syu';

var HTML1 = '<form name="syumo" ' + counter + '">\n' +

'<select id="shumoku ~~name="syumok onchange="imgChange();~~>\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>';

cell1.innerHTML = HTML1;

}

</script>

```

###補足情報

参考にさせていただいたサイト様

https://www.mdn.co.jp/webcre/Tips/Vol12/js_imagechange02.html

http://www.abe-tatsuya.com/web_prog/javascript/add_table_rows.php

JavaScript

29433 questions

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

HTML

18193 questions

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

Monaca

1408 questions

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

3 ""の追加

hain score 25

2017/09/07 20:46 投稿

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

###前提・実現したいこと

MonecaでHTMLとjavascriptを用いてアプリを作っています。

ドロップダウンのメニューを追加ボタンを用いて動的に生成しています。

生成したメニューについてもOnchangeをつけたいのですが、試した方法ではうまくいかず、困っています。

お力添えのほどよろしくお願いいたします

###ドロップダウンメニュー追加用のスクリプトです。

```Javascript

var counter = 0;

function AddTableRows(){

// カウンタを回す

counter++;

var table1 = document.getElementById("table1");

var row1 = table1.insertRow(counter);

var cell1 = row1.insertCell(0);

// class の付与は UserAgent によって

// 挙動が違うっぽいので念のため両方の方法で

cell1.setAttribute("class","syu");

cell1.className = 'syu';

var HTML1 = '<form name="syumo" ' + counter + '">\n' +

'<select id="shumoku ~~name="syumok~~ >\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>';

cell1.innerHTML = HTML1;

}

</script>

```

上記のスクリプトのでドロップダウンメニューを追加しています。

```HTML

<form>

</select>

</form>

```

上記のスクリプトはonchangeによって関数を呼び出し、実行することができました。

画面上部にある追加ボタンを押すことで

初めからあるドロップダウンメニュー(HTML内のもの)の下に新たに動的に生成(javascriptで呼び出したもの)しています。

###試したこと

Javascript内でvar=HTML1のselectタグの中に入れてみましたが関数を呼び出せませんでした

```Javascript

function AddTableRows(){

// カウンタを回す

counter++;

var table1 = document.getElementById("table1");

var row1 = table1.insertRow(counter);

var cell1 = row1.insertCell(0);

// class の付与は UserAgent によって

// 挙動が違うっぽいので念のため両方の方法で

cell1.setAttribute("class","syu");

cell1.className = 'syu';

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>';

cell1.innerHTML = HTML1;

}

</script>

```

###補足情報

参考にさせていただいたサイト様

https://www.mdn.co.jp/webcre/Tips/Vol12/js_imagechange02.html

http://www.abe-tatsuya.com/web_prog/javascript/add_table_rows.php

JavaScript

29433 questions

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

HTML

18193 questions

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

Monaca

1408 questions

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

2 コードの訂正を行いました

hain score 25

2017/09/07 20:43 投稿

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

###前提・実現したいこと

MonecaでHTMLとjavascriptを用いてアプリを作っています。

ドロップダウンのメニューを追加ボタンを用いて動的に生成しています。

生成したメニューについてもOnchangeをつけたいのですが、試した方法ではうまくいかず、困っています。

お力添えのほどよろしくお願いいたします

###ドロップダウンメニュー追加用のスクリプトです。

```Javascript

var counter = 0;

function AddTableRows(){

// カウンタを回す

counter++;

var table1 = document.getElementById("table1");

var row1 = table1.insertRow(counter);

var cell1 = row1.insertCell(0);

// class の付与は UserAgent によって

// 挙動が違うっぽいので念のため両方の方法で

cell1.setAttribute("class","syu");

cell1.className = 'syu';

var HTML1 = '<form name="syumo" ' + counter + '">\n' +

'<select id="shumoku name="syumok >\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>';

cell1.innerHTML = HTML1;

}

</script>

```

上記のスクリプトのでドロップダウンメニューを追加しています。

```HTML

<form>

</select>

</form>

```

上記のスクリプトはonchangeによって関数を呼び出し、実行することができました。

画面上部にある追加ボタンを押すことで

初めからあるドロップダウンメニュー(HTML内のもの)の下に新たに動的に生成(javascriptで呼び出したもの)しています。

###試したこと

Javascript内でvar=HTML1のselectタグの中に入れてみましたが関数を呼び出せませんでした

```Javascript

function AddTableRows(){

// カウンタを回す

counter++;

var table1 = document.getElementById("table1");

var row1 = table1.insertRow(counter);

var cell1 = row1.insertCell(0);

// class の付与は UserAgent によって

// 挙動が違うっぽいので念のため両方の方法で

cell1.setAttribute("class","syu");

cell1.className = 'syu';

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>';

cell1.innerHTML = HTML1;

}

</script>

```

###補足情報

参考にさせていただいたサイト様

https://www.mdn.co.jp/webcre/Tips/Vol12/js_imagechange02.html

http://www.abe-tatsuya.com/web_prog/javascript/add_table_rows.php

JavaScript

29433 questions

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

HTML

18193 questions

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

Monaca

1408 questions

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

1 コード部分を読みやすくしました

hain score 25

2017/09/07 20:40 投稿

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

###前提・実現したいこと

MonecaでHTMLとjavascriptを用いてアプリを作っています。

ドロップダウンのメニューを追加ボタンを用いて動的に生成しています。

生成したメニューについてもOnchangeをつけたいのですが、試した方法ではうまくいかず、困っています。

お力添えのほどよろしくお願いいたします

###ドロップダウンメニュー追加用のスクリプトです。

```Javascript

var counter = 0;

function AddTableRows(){

// カウンタを回す

counter++;

var table1 = document.getElementById("table1");

var row1 = table1.insertRow(counter);

var cell1 = row1.insertCell(0);

// class の付与は UserAgent によって

// 挙動が違うっぽいので念のため両方の方法で

cell1.setAttribute("class","syu");

cell1.className = 'syu';

var HTML1 = '<form name="syumo" ' + counter + '">\n' +

'<select id="shumoku name="syumok >\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>';

cell1.innerHTML = HTML1;

}

```

上記のスクリプトのでドロップダウンメニューを追加しています。

```HTML

<form>

</select>

</form>

```

上記のスクリプトはonchangeによって関数を呼び出し、実行することができました。

画面上部にある追加ボタンを押すことで

初めからあるドロップダウンメニュー(HTML内のもの)の下に新たに動的に生成(javascriptで呼び出したもの)しています。

###試したこと

Javascript内でvar=HTML1のselectタグの中に入れてみましたが関数を呼び出せませんでした

```Javascript

function AddTableRows(){

// カウンタを回す

counter++;

var table1 = document.getElementById("table1");

var row1 = table1.insertRow(counter);

var cell1 = row1.insertCell(0);

// class の付与は UserAgent によって

// 挙動が違うっぽいので念のため両方の方法で

cell1.setAttribute("class","syu");

cell1.className = 'syu';

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>';

cell1.innerHTML = HTML1;

}

```

###補足情報

参考にさせていただいたサイト様

https://www.mdn.co.jp/webcre/Tips/Vol12/js_imagechange02.html

http://www.abe-tatsuya.com/web_prog/javascript/add_table_rows.php

JavaScript

29433 questions

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

HTML

18193 questions

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

Monaca

1408 questions

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

質問編集履歴

teratailアカウントでログイン

SNSアカウントでログイン