我已经为 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]);
}
},
最佳答案
Node#nodeName
属性存储节点的类型(Text
、Element
、Comment
等),而不是节点表示的 HTML 元素的标签名称.
因此,Node#nodeName
永远不会等于"input"
,并且您的代码将不会运行。
要检查标签名称,请使用 Element#tagName
相反:
if (event.target.tagName == "input") {
此外,最好检查单击的元素是否是您的按钮,因此,如果您可以选择该按钮,最好对其进行相等检查:
if (event.target === document.querySelector(selectorOfButton)) {
关于javascript - 事件委托(delegate)与 if else 语句一起无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59020067/