関数の中で追加したイベントリスナーが動かなくなった
Q&A
Closed
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
