javascript - 如何使用 if 语句和 .innerText 比较分数？

Question

我正在尝试制作一个 Ping Pong scoreKeeper。除了比较分数和宣布获胜者的部分外，一切都已完成。我正在尝试使用if语句来比较两个变量的 innerText 以及它们的分数是否匹配。但它不起作用。

这是我编写的 Javascript 和 HTML 代码。

const p1Score = document.querySelector("#p1Score")
const p2Score = document.querySelector("#p2Score")

const increaseP1Score = document.querySelector("#increaseP1Score")
const increaseP2Score = document.querySelector("#increaseP2Score")
const resetScore = document.querySelector("#resetScore")

const scoreKeeper = document.querySelector("#scoreKeeper")

increaseP1Score.addEventListener('click', function(event) {
    p1Score.innerText++
    // if (p1Score.innerText == 5 && p1Score.innerText > p2Score.innerText) {
    // console.log("Here it works!")

})
increaseP2Score.addEventListener('click', function() {
    p2Score.innerText++
})
resetScore.addEventListener('click', function() {
    p1Score.innerText = 0;
    p2Score.innerText = 0;
})

if (p1Score.innerText == 5 && p1Score.innerText > p2Score.innerText) {
    console.log("Working!")
}

 <div id="container">
        <header id="header">
            <h1 id="scoreKeeper">Current Score: <span id="p1Score">0</span> to <span id="p2Score">1</span></h1>
        </header>
        <footer id="footer">
            <button id="increaseP1Score">+1 Player One</button>
            <button id="increaseP2Score">+1 Player Two</button>
            <button id="resetScore">Reset</button>
        </footer>
    </div>

你会在我的 JS 代码中看到一条注释。当我尝试比较那里的值时，它以某种方式起作用。但我不知道为什么它在事件侦听器之外不起作用。

标签： javascriptif-statementaddeventlistener

Answer 1

    const p1Score = document.querySelector("#p1Score")
    const p2Score = document.querySelector("#p2Score")

    const increaseP1Score = document.querySelector("#increaseP1Score")
    const increaseP2Score = document.querySelector("#increaseP2Score")
    const resetScore = document.querySelector("#resetScore")

    const scoreKeeper = document.querySelector("#scoreKeeper")

    increaseP1Score.addEventListener('click', function(event) {
        p1Score.innerText++
        checkScore();
        // if (p1Score.innerText == 5 && p1Score.innerText > p2Score.innerText) {
        // console.log("Here it works!")

    })
    increaseP2Score.addEventListener('click', function() {
        p2Score.innerText++
        checkScore();
    })
    resetScore.addEventListener('click', function() {
        p1Score.innerText = 0;
        p2Score.innerText = 0;
    })

    function checkScore(){
        if (p1Score.innerText == 5 && p1Score.innerText > p2Score.innerText) {
            //console.log("Working!")
            alert("working!");
        }
    }

     <div id="container">
            <header id="header">
                <h1 id="scoreKeeper">Current Score: <span id="p1Score">0</span> to <span id="p2Score">1</span></h1>
            </header>
            <footer id="footer">
                <button id="increaseP1Score">+1 Player One</button>
                <button id="increaseP2Score">+1 Player Two</button>
                <button id="resetScore">Reset</button>
            </footer>
        </div>

当页面加载时，您的 if 语句只运行一次。您可以将功能...放在checkScore()上面的函数中，并在增加分数时调用它。这更可重用，并且是在每个增量器中对其进行硬编码的更好解决方案。