Question

我已将事件侦听器分配给HTML容器，并且当用户单击“再次播放”按钮时，应执行“ if”语句中的代码。单击“再次播放”按钮时没有任何反应，也没有任何内容记录到控制台。我尝试了各种不同的方法，例如进行测试以查看元素是否具有特定的类名等。

以下是相关的HTML代码：

<div class="play-again-btn">
 <input type="button" class="play-btn" value="PLAY AGAIN">
</div>

在此处将事件侦听器分配给容器：

document.querySelector(DOMstrings.endContainer).addEventListener("click", playerCtrl.playAgain);

这是playAgain方法：

playAgain: (event) => {
            let finishedPlayer, parentEl;

            console.log(event.target);

            //1. only action below code if correct button is clicked (correct target element is clicked) 
            if (event.target.nodeName == "input") {

                //2. delete existing character from finish line
                finishedPlayer = document.querySelector(DOMstrings.finishBox);
                finishedPlayer.removeChild(finishedPlayer.childNodes[0]);

                //3. bring character select pop up

                document.querySelector(DOMstrings.usersInput).style.visibility = "unset";


                //4. remove leaderboard pop up 

                parentEl = document.querySelector(DOMstrings.endContainer);
                parentEl.removeChild(parentEl.childNodes[1]);
            }

          },

Answer 1

Node#nodeName属性存储节点的类型（Text，Element，Comment等），而不存储节点代表的HTML元素的标签名称。

因此，Node#nodeName永远不会等于"input"，并且您的代码将无法运行。

要检查标签名称，请改用Element#tagName：

if (event.target.tagName == "input") {

除此之外，最好检查一下单击的元素是否是按钮，因此，如果可以选择按钮，则最好对其进行相等检查：

if (event.target === document.querySelector(selectorOfButton)) {

事件委托不能与if else语句一起正常使用

1 个答案: