イベントリスナーが機能しない

Question

これはなぜ機能しないのか考えてください。

クリックの作品は一度はい]ボタン - [いいえ]ボタンが動作しません

function $(x) { 
 
    return document.getElementById(x); 
 
} 
 

 
var glob = 0; 
 

 
function new_index() { 
 
    glob += 1; 
 
    return "d" + glob; 
 
} 
 

 
function play() { 
 
    say("Hello is JS Fun?"); 
 
    response("No", 
 
     function() { 
 
      say("Oh dear") 
 
     }); 
 
    response("Yes", 
 
     function() { 
 
      say("Great:"); 
 
     }); 
 
} 
 

 
function say(x) { 
 
    $("txt").innerHTML += x; 
 
} 
 

 
function response(Txt, Fun) { 
 
    var n = new_index(); 
 
    var s = "<button id='" + n + "'>" + Txt + "</button>"; 
 
    say(s); 
 
    var xx = $(n); 
 
    // xx.onclick=Fun; 
 
    xx.addEventListener("click", Fun); 
 
} 
 

 
play();

<div id="txt"></div>

Answer 1

それだたびに、あなたは思うかもしれないとして、それだけでは追加されませんinnerHTMLプロパティを設定しているため、 innerHTMLを新しい値に設定し、古いイベントリスナーを添付して古い要素を削除します。

Answer 2

イベントハンドラは、$("txt").innerHTML += x;で失われます。

Answer 3

他にも言及したように、コードの主な問題は、後でinnerHTMLコールでイベントバインディングが失われることです。はいがテキストを追加すると、それ自体が壊れます。

DOMを使用する場合は、HTMLテキストを変更する（innerHTML）よりも要素を作成する方がよいでしょう。ボタンの場合は、（1）ID付きのボタンを作成し、次に（2）ボタンを見つける必要がないことを意味します。 createElementには参照があります。

function $(x) { 
 
    return document.getElementById(x); 
 
} 
 

 
var glob = 0; 
 

 
function new_index() { 
 
    glob += 1; 
 
    return "d" + glob; 
 
} 
 

 
function play() { 
 
    say(text("Hello is JS Fun?")); 
 
    response("No", 
 
     function() { 
 
      say(text("Oh dear")); 
 
     }); 
 
    response("Yes", 
 
     function() { 
 
      say(text("Great:")); 
 
     }); 
 
} 
 

 
function text(String) { 
 
    var node = document.createElement("span"); 
 
    node.innerHTML = String; 
 
    return node; 
 
} 
 

 
function say(x) { 
 
    $("content").appendChild(x); 
 
} 
 

 
function response(Txt, Fun) { 
 
    var button = document.createElement("button"); 
 
    button.innerHTML = Txt; 
 
    button.addEventListener("click", Fun); 
 
    say(button); 
 
} 
 

 
play();

<div id="content"></div>