我在按钮上放置的EventListener在第一次单击时不起作用

问题描述 投票：1回答：2

我的这段代码唯一的问题是，当我单击“播放器一”按钮或“播放器二”按钮时，它不会开始增加我的数字。其他一切正常，只是我必须单击两次以使其开始递增。有什么方法可以让我从第一次点击开始？

<!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);
javascript html event-handling dom-events
2个回答
2
投票

这里是您直接增加的答案。

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/

0
投票

这里是您直接增加的答案。

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.