How to get a javascript variable to display a change when you click a button?

Question

I'm fairly new to HTML and JS and this is a smaller part of a larger project I'm working on. What I'm trying to do is get the number on screen to change whenever either button is clicked. As is, when I click the button the value of 'score' changes but it does not update on the page. I have tried using setInterval on the document.write in the body and that didn't work. I am very much stuck and any help is appreciated, thank you.

<!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>Document</title>
    <script>
        let score = 1;
        function subtractOne() {
            score--;
        }
        function addOne() {
            score++;
        }
    </script>
 </head>
 <body>
    <button id="subtractOne" onclick="subtractOne()">Subract One</button>
    <script>document.write(score)</script>
    <button id="addOne" onclick="addOne()">Add One</button>
</body>
</html>

In the functions subtractOne() and addOne() you need to add some logic that will update your "score" field. Usually, it is easier to create a `````` and update it using ```document.getElementById("scoreSpan").textContent= score;``` — Bastiaan Buitelaar, Jul 20 '22 at 20:18
I have worked on this for two days, thank you so much it works — Spice13, Jul 20 '22 at 20:26

score 0 · Answer 1 · answered Jul 20 '22 at 20:22

You need to use current score value and put it somewhere after each update.

let score = 1;
updateText();

function subtractOne() {
    score--;
    updateText();
}

function addOne() {
    score++;
    updateText();
}

function updateText() {
  document.getElementById('result').innerText = score;
}

<!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>Document</title>
 </head>
 <body>
    <span id='result'></span>
    <button onclick="subtractOne()">Subract One</button>
    <button onclick="addOne()">Add One</button>
</body>
</html>

score 0 · Answer 2 · answered Jul 20 '22 at 20:27

you can define a function to inject the value. and also, you can inject the value once the document load completely

    <!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>Document</title>
      <script>
        let score = 12;
        window.onload = () => {
          update()
    
        }
        function update() {
          const span = document.getElementById('updateme')
          span.innerHTML = score
        }
        function subtractOne() {
          score--;
          update()
        }
        function addOne() {
          score++;
          update()
        }
      </script>
    </head>
    
    <body>
      <button id="subtractOne" onclick="subtractOne()">Subract One</button>
      <span id="updateme"></span>
      <button id="addOne" onclick="addOne()">Add One</button>
    </body>
    
    </html>

score 0 · Answer 3 · answered Jul 20 '22 at 20:30

<!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>Document</title>
<script>
    let score = 1;
    function subtractOne() {
       document.getElementById("myTextarea").value = score--;
    }
    function addOne() {
        document.getElementById("myTextarea").value  = score++;
    }
</script>
</head>
<body>
<button id="subtractOne" onclick="subtractOne()">Subract One
</button>
<textarea id="myTextarea" cols="2">

</textarea>
<button id="addOne" onclick="addOne()">Add One</button>

score 0 · Answer 4 · answered Jul 20 '22 at 20:44

By default javascript willn't listening the value changes in the UI. Write eventlisteners and render it to the UI.

document.write(score) this will be called on initial load and willn't be rendered again and again until page re-renders.

So create any html tag and Whenever you are calling add/sub methods return updated the value to that newly created tag like below

function subtractOne() {
            score--;
document.getElementById("testVal").textContent= score;
        }
        function addOne() {
            score++;
document.getElementById("testVal").textContent= score;
        }
    
    <span id="testVal"></span>

How to get a javascript variable to display a change when you click a button?

4 Answers4