按钮监听器 JavaScript答案

【问题标题】：Button Listener JavaScript按钮监听器 JavaScript
【发布时间】：2021-02-15 08:34:01
【问题描述】：

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

它是一个小型的消息应用程序，您可以在其中玩chifoumi。

在照片中，我们收到了 2 个游戏请求，其特点是“回答 (Répondre au 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 + " :";
        });
    }
}

我认为我的其余代码不会对您有任何好处。我不会在别处碰听者。

提前谢谢你..

【问题讨论】：

按钮是否被禁用？如果禁用，则不会检测到点击事件。
我说的是第一个保持活动状态的按钮，抱歉我修正了打字错误。
如果代码进入result.from == currentPseudo，则不会添加任何事件监听器
这个条件只是可以区分发送者与挑战和接收者，在我们的例子中，我们是接收者，所以我们总是会进入 else。而且，在您单击任何按钮之前，它们都可以正常工作！监听器在那里，这里单击按钮然后发送，删除与此按钮关联的监听器。怎么可能？
事实上，点击一个按钮会在底部显示一个文本。在我发送响应之前，按钮不会关闭。在发送之前，按钮都可以在底部显示不同的文本！但是如果我点击发送，那么目标按钮会停用它（这是正常的），但另一个会失去它的监听器。

标签： javascript sockets debugging button listener

【解决方案1】：

代表用户253751回答

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

【讨论】：