прослушиватель событий не работает

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) создать кнопку с идентификатором, а затем (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>