我放在按钮上的 EventListener 在第一次点击时不起作用答案

【问题标题】：The EventListener I put on my buttons does not work on the first click我放在按钮上的 EventListener 在第一次点击时不起作用
【发布时间】：2019-11-20 16:40:05
【问题描述】：

此代码的唯一问题是，当我单击“玩家一”按钮或“玩家二”按钮时，它不会开始增加我的数字。其他一切都有效，只是我必须单击两次才能让它开始增加。有没有办法让我从第一次点击就做到这一点？

<!DOCTYPE html>
<html>
<head>
    <title>Score Keeper</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <h1><span id="player1Score">0</span> to <span id="player2Score">0</span></h1>
    <p>Playing to: <span id="matchScore">5</span></p>
    <div>
        <input type="number" name="matchScore">
        <button>Player One</button>
        <button>Player Two</button>
        <button>Reset</button>
    </div>
</body>
</html>

window.setTimeout(function() {
    var player1Score = 0
    var player2Score = 0
    var buttP1 = document.querySelector("button")
    var buttP2 = document.querySelectorAll("button")[1]
    var buttReset = document.querySelectorAll("button")[2]
    var inputMatchScore = document.querySelector("input")

    buttP1.addEventListener("click", function(){
        if(document.getElementById("player1Score").textContent < Number(document.getElementById("matchScore").textContent)){
            document.getElementById("player1Score").textContent = player1Score++
        }
    })
    buttP2.addEventListener("click", function(){
        if(document.getElementById("player2Score").textContent < Number(document.getElementById("matchScore").textContent)){
            document.getElementById("player2Score").textContent = player2Score++
        }
    })
    buttReset.addEventListener("click", function(){
        document.getElementById("player1Score").textContent = 0
        document.getElementById("player2Score").textContent = 0
        player1Score = 0
        player2Score = 0
    })
    inputMatchScore.addEventListener("input", function(){
        document.getElementById("matchScore").textContent = document.querySelector("input").value
    })
}, 500);

【问题讨论】：

除了主要问题PM 77-1 points out，也没有理由在你的代码中使用setTimeout。将script 标记移到body 的末尾，就在</body> 标记之前，然后直接使用计时器函数的主体。（即使在现代浏览器上，您也可以将defer 添加到您的script 标记中。）此外，没有理由反复向DOM 询问相同的信息。相反，var list = document.querySelectorAll("button")（你也可以使用getElementsByTagName）然后使用该列表来设置你的变量。

标签： javascript html event-handling dom-events

【解决方案1】：

这是你直接递增的答案。

window.setTimeout(function() {
    var player1Score = 0
    var player2Score = 0
    var buttP1 = document.querySelector("button")
    var buttP2 = document.querySelectorAll("button")[1]
    var buttReset = document.querySelectorAll("button")[2]
    var inputMatchScore = document.querySelector("input")

    buttP1.addEventListener("click", function(){
        if(document.getElementById("player1Score").textContent < Number(document.getElementById("matchScore").textContent)){
          document.getElementById("player1Score").textContent++
        }
    })
    buttP2.addEventListener("click", function(){
        if(document.getElementById("player2Score").textContent < Number(document.getElementById("matchScore").textContent)){
            document.getElementById("player2Score").textContent++
        }
    })
    buttReset.addEventListener("click", function(){
        document.getElementById("player1Score").textContent = 0
        document.getElementById("player2Score").textContent = 0
        player1Score = 0
        player2Score = 0
    })
    inputMatchScore.addEventListener("input", function(){
        document.getElementById("matchScore").textContent = document.querySelector("input").value
    })
}, 500);

<!DOCTYPE html>
<html>
<head>
    <title>Score Keeper</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <h1><span id="player1Score">0</span> to <span id="player2Score">0</span></h1>
    <p>Playing to: <span id="matchScore">5</span></p>
    <div>
        <input type="number" name="matchScore">
        <button>Player One</button>
        <button>Player Two</button>
        <button>Reset</button>
    </div>
</body>
</html>

 document.getElementById("player1Score").textContent++

【讨论】：

【解决方案2】：

这是因为你的编程方式。

 document.getElementById("player1Score").textContent = player1Score++

具体来说，player1Score++ 部分。这意味着第一个 当前值 在表达式中使用（在您的情况下，直接赋值），然后才增加。

++player1Score 将为您工作。

该主题的教程之一：https://www.tutorialgateway.org/increment-and-decrement-operators-in-javascript/

【讨论】：

@T.J.Crowder - 已替换。谢谢你。由于我决定在我的简短回答中不使用 postfix 和 prefix 术语 - 为此需要一个教程。