按钮侦听器JavaScript

问题描述

我有一个有趣的错误，我不知道它是否来自我忽略了javascript的观点，但这根本没有意义！

这是一个小型消息传递应用程序，您可以在其中播放chifoumi。

在照片中，我们收到了2个游戏请求，其特征是带有“答案（Répondreau jeu）”按钮，当我们回答后，该按钮将被停用！到目前为止，是的，但是问题是您在这里看到的第一个按钮不再被收听，实际上，就好像与该按钮关联的侦听器本身已经飞过一样。

所以我不明白为什么按钮会失去它的监听器；知道在单击另一个按钮之前，它可以正常工作（按下按钮仅会填充底部的文本框，如果我不发送该按钮，该按钮将保持活动状态）。

这是我的代码：

socket.on("chifoumi",function(result) {

    var win = document.getElementById("content");

    var date = new Date(result.date);
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();

    if (date.getHours() < 10)
        hours = "0" + date.getHours();
    if (date.getMinutes() < 10)
        minutes = "0" + date.getMinutes();
    if (date.getSeconds() < 10)
        seconds = "0" + date.getSeconds();

    let main = document.getElementsByTagName("MAIN");

    if (result.from == currentPseudo) {
        main[0].innerHTML += "<p class=\"chifoumi\">" + hours + ":" + minutes + ":" +
            seconds + " - [chifoumi] : Défi envoyé à " + result.to + "</p>";
    } else if (result.from != currentPseudo) {


        main[0].innerHTML += "<p class=\"chifoumi\">" + hours + ":" + minutes + ":" +
            seconds + " - [chifoumi] : " + result.from + " te défi à Paper-Rock-Scissors-Lizard-Spock. <button class=" + result.from + " name = \"btn\"> Répondre au jeu </button></p > ";
        win.className = "buzz";
        buttonListener();

    }
});

每次添加新按钮时，都会更新按钮的所有侦听器，因为添加新按钮时存在相同的问题，其他按钮却失去了侦听器！

function buttonListener() {

    let btn = document.getElementsByName("btn");
    console.log(btn);
    for (let bt of btn) {
        ////LISTENER MULTI BOUTON
        console.log(bt);
        bt.addEventListener("click",function(e) {
            startGame = 1;
            msgChiff = "/chifoumi @" + this.className + " :";
            document.getElementById("monMessage").value = "/chifoumi @" + this.className + " :";
        });
    }
}

我认为我的其余代码对您没有好处。我不会触摸其他地方的听众。

我先谢谢你。

解决方法

代表user253751回答

这可能是因为您正在设置innerHTML。通过设置innerHTML，您告诉浏览器删除main [0]内的所有内容，然后将内容添加回innerHTML字符串中。但是innerHTML字符串没有任何事件侦听器。因此，您一无所获。尝试改用appendElement，它会添加一个新元素，而不更改其他任何元素。