セキュリティ上の理由から,要素を追加する際にinnerHTMLを直接操作することは避けるべきです.詳細は以下の記事にもまとまっていますが,DOM上に要素を追加する際はdocument.createElement()とNode.appendChild()を利用して追加してください.
See the Pen Adding button example by Verclene (@verclene) on CodePen.
0Like
関数の中で追加したイベントリスナーが動かなくなった
Q&AClosed
JavaScriptで、「ボタンを追加し、そのボタンがクリックされたときにアロー関数の中に記述したJavaScriptコードを実行する」という関数を作りました。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
function createbutton (process,text){
document.querySelector('body').innerHTML = document.querySelector('body').innerHTML + '<button id="' + text + '">' + text + '</button>';
document.getElementById(text).addEventListener("click",
async (e)=>{
process();
});
};
//呼び出し時のコードはこんな感じ
createbutton((e)=>{console.log("hello")},"click me");
</script>
</body>
</html>
しかし、これを複数回実行すると、いちばん最後に作られたボタンを押しても反応しなくなってしまいます。「イベントリスナーを設定するときに使われている『document.getElementById(text)』が返す値が間違っているのでは？」と予想し、2行目と3行目の間にconsole.log(document.getElementById(text));を追加しましたが、ちゃんとコンソールに要素のデータは出力されました。何が間違っているのでしょうか？
追記 引数textに二回以上同じ文字列を指定したわけではありません(=同じidの要素が複数存在する事はありません)。
0
1Answer
Comments
@rex9000
Questioner役に立ちました。ありがとうございます。