createElementで作成した「input」要素のonclick属性に値が入らない

Question

お世話になっております。
DIV要素ないにinput要素をjavascriptで追加するfunctionを作成し、
input要素のonlick属性に値を設定するようなファンクションを以下の
ようにして作成してみましたが、値が設定されない状況です。

function createTable(data) {
    var chdv = document.createElement('div');
    var chbtn = document.createElement('input');
    chbtn.type = "button";
    chbtn.value = "hoge";
    chbtn.onclick ="hoge()";
    chdv.appendChild(chbtn);
    return chdv;
}

【確認してみたこと】
・typeにはbuttonが設定されている
・valueにもhogeが設定されている
・なぜかonclickはnullとなる

【試してみたこと】
アドバイスいただければ助かります。

よろしくお願いします。

Answer 1

onclickプロパティ

input要素ノードの「onlickプロパティ」には関数オブジェクトを代入しなければなりません。

• GlobalEventHandlers.onclick - Web API | MDN

addEventListener

addEventListener を使用すると、onclick再代入時のように上書きされず、様々なオプションを使用出来ます。

• EventTarget.addEventListener() - Web API | MDN

Re: Yasu0421 さん

Comments

[Yasu0421]

回答いただきありがとうございます。
ご教示いただいた内容で、やりたいことを実現することができました。
大変助かりました。