0

I am doing a ping pong score keeper and want the values on the h1 element to change when I press the buttons but they just stay at 0. When i press "butonOne" the first value of the h1 element should go up by 1 and when i press "butonTwo" the second value should go up by 1. I Would appreciate if someone can fix it for me:

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 (less important)

* {
    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;
}
matsolord
  • 39
  • 3
  • Changing variable values won't update the DOM. You need to update `h1.innerText` each time you want it changed – Phil Feb 20 '23 at 00:28
  • You can create a function to update h1 every time you add a value to the scores. Like this: ``function changePontuation(scoreOne, scoreTwo) { h1.innerText= `${scoreOne} to ${scoreTwo}` }`` – Vanortton Feb 20 '23 at 00:33
  • You only call `h1.innerText= \`${scoreOne} to ${scoreTwo}\`` once, move it to the event listener functions. Related question that is linked with closure is irrelevant, different issue. – PsychoMantis Feb 20 '23 at 00:35

0 Answers0