无法更改 h1 元素的分值 [重复]

问题描述 投票:0回答:0

我正在做一个乒乓记分员,我希望 h1 元素上的值在我按下按钮时发生变化,但它们只是保持在 0。当我按下“butonOne”时,h1 元素的第一个值应该增加 1 并且当我按下“butonTwo”时,第二个值应该增加 1。如果有人能为我修复它,我将不胜感激:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scoreKeeper - JS</title>
    <link rel="stylesheet" href="scoreKeeper.css">
</head>

<body>

    <div id="imageDiv">
        <img
            src="https://media.istockphoto.com/id/503250996/photo/ping-pong-or-table-tennis-background-with-rackets.jpg?s=612x612&w=0&k=20&c=XSTF2456Iq81RxL_D887ikZOpyfEtUgEpPZGfTKrwRI="
            alt="tableTennisImage">
    </div>

    <div id="title">
        <h3>Ping Pong Score Keeper</h3>
    </div>

    <div id="scoreDiv">
        <h1 id="scoreKeeper"></h1>
        <p>Use the buttons below to keep the score</p>
        <h3>Playing To</h3>
        <select id="scoreLimiter">
            <option value="7">7</option>
            <option value="11">11</option>
            <option value="21">21</option>
        </select>
        <button id="sumPlayerOne">1+ Player One</button>
        <button id="sumPlayerTwo">1+ Player Two</button>
        <button id="reset">Reset</button>
    </div>

    <script src="scoreKeeper.js"></script>
</body>

</html>

JavaScript

const buttonOne = document.querySelector("#sumPlayerOne");
const buttonTwo = document.querySelector("#sumPlayerTwo");
const resetear = document.querySelector("#reset")
const h1 = document.querySelector("#scoreKeeper")

let scoreOne = 0;
let scoreTwo = 0;

buttonOne.addEventListener("click", (e) => {
    
    const winOne = () => {
        scoreOne = scoreOne+1;
    }
   winOne()   
});

buttonTwo.addEventListener("click", (e) => {
    
    const winTwo = () => {
        scoreTwo = scoreTwo+1;
   }
    winTwo()
});

h1.innerText= `${scoreOne} to ${scoreTwo}` 

CSS(不太重要)

* {
    box-sizing: border-box;
}

body{
    font-family: monospace;
    font-weight: 600;
}

#imageDiv {
display: flex;
justify-content: center;
}

img {
width: 25rem;
border-radius: 10px;
}

#title{
    margin-top: 1rem;
    margin-bottom: 10px;
    padding-left: 1rem;
    border: 1px solid lightgray;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 10px ;
}

#scoreKeeper{
font-size: 300%;
}

#scoreDiv {
border: 1px solid lightgray;
padding-left: 1rem;
padding-bottom: 1rem;
border-radius: 10px ;
margin-left: 5px;
margin-right: 5px;
}

#scoreLimiter{
    font-family: monospace;
    font-size: 17px;
}

#sumPlayerOne{
    font-family: monospace;
}

#sumPlayerTwo{
    font-family: monospace;
}

#reset{
    font-family: monospace;
}

javascript html
© www.soinside.com 2019 - 2024. All rights reserved.