動的に生成したbuttonにonClickを追加したい

test.html

html
1<html>
2  <body>
3    <h1>a</h1>
4    <script src="./test.js"></script>
5  </body>
6</html>

test.js

javascript
1var form = document.createElement('form');
2form.id = 'Form';
3
4var out = document.createElement('output');
5out.name = 'op';
6form.appendChild(out);
7var element = document.getElementsByTagName('h1')[0];
8element.appendChild(form);
9
10var el = document.getElementById('Form');
11var text = document.createElement('input');
12text.type = 'text';
13text.name = 'a'
14el.appendChild(text);
15
16var btn = document.createElement('button');
17btn.type = 'button';
18btn.onclick= "op.value = a.value" //ここが上手くいかない
19var submit = document.createTextNode("submit");
20btn.appendChild(submit);
21el.appendChild(btn)
22

onclickを追加する場合、test.jsの下から４行目のようにかけるかと思ったのですがうまくできませんでした
JavaScriptで追加したbuttonにさらにonClick処理を追加するにはどうしたらよいのでしょうか？

また、タイトルには記していないことなのですが、button要素のtextContentを追加するとき、上記のtest.jsのように書くべきか、それとも次のように書くべきか、どちらがただしいのでしょうか

javascript
1//test.jsの下から６行分を書き換えました
2var btn = document.createElement('button');
3btn.type = 'button';
4btn.onclick= "op.value = a.value" //ここが上手くいかない
5btn.textContent = 'submit'
6el.appendChild(btn)

ご教示お願いします

行動規範の内容に同意します

回答2件

ベストアンサー

JavaScript
1btn.onclick= function() { // onclick には関数を入れる
2	// "op.value = a.value"
3	out.value = text.value;
4	// outやtextはこれの前にvarで宣言しているので使えますが、
5	// そうでない場合はidを付けてdocument.getElementById('aaa').value という感じで。
6};
7```**動くサンプル：**[https://jsfiddle.net/rwcb1sjr/](https://jsfiddle.net/rwcb1sjr/)
8
9---
10
11> button要素のtextContentを追加するとき、上記のtest.jsのように書くべきか、それとも次のように書くべきか、どちらがただしいのでしょうか 
12
13どちらも問題ないと思います。テキスト以外を入れる場合は innerHTML や insertAdjacentHTML などがあります。
14
15【element.innerHTML - Web API インターフェイス | MDN】
16[https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML](https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML)
17
18【innerHTMLの代わりにinsertAdjacentHTML()を使ってみようか。（DOMおれおれAdvent Calendar 2015 ? 01日目） | Ginpen.com】
19[http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/](http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/)
20
21---
22
23ちなみにh1要素にform要素を入れるのは文法違反なので避けましょう。
24
25【form 要素 - HTML | MDN】
26[https://developer.mozilla.org/ja/docs/Web/HTML/Element/form](https://developer.mozilla.org/ja/docs/Web/HTML/Element/form)
27
28【h1 要素 - HTML | MDN】
29[https://developer.mozilla.org/ja/docs/Web/HTML/Element/h1](https://developer.mozilla.org/ja/docs/Web/HTML/Element/h1)