Question

任何想法，为什么这不起作用。

单击“是”按钮可以使用一次 - “否”按钮不起作用

＆＃13;

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();

＆＃13;

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

＆＃13;

Answer 1

这是因为每次你设置innerHTML时它都不会像你想象的那样添加，它会将innerHTML设置为一个新值，并通过删除附加旧事件监听器的旧元素。

Answer 2

正如其他人所提到的，代码中的主要问题是您在后续的innerHTML调用中丢失了事件绑定 - 没有停止工作，因为它是在Yes之后。当“是”附加文本时，它会自行中断。

使用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>

Answer 3

事件处理程序在$("txt").innerHTML += x;上丢失。

事件监听器不起作用

3 个答案: