CODEWITHSUNDEEP
javascriptbuttontext
Biligsaikhan
Biligsaikhan

Reputation: 111

How to update HTML text by button?

this is what i achieved so far. With the button i can get scores to add up to total. but at the Score it is not updated everytime. 

 <script>
    function True(){
        score5=1;
            alert("Correct");   
        total=score1+score2+score3+score3+score5;
        }
    </script>

    <input type="button" value="True" onClick="True()">

    <h2>Score:<script>document.write(total)</script><h2>

Upvotes: 0

Views: 82

Answers (2)

Rhumborl
Rhumborl

Reputation: 16609

The document.write will run when the page is being parsed by the browser, way before the True() function is run. You need to give an id to your h2, then use that to set its innerHTML to the calculated score inside True():

// dummy values
var score1 = 5, score2 = 4, score3 = 3, score4 = 2;

function True(){
    score5=1;
    alert("Correct");   
    total=score1 + score2 + score3 + score4 + score5;
    document.getElementById('score').innerHTML = "Score: " + total.toString();
}
<input type="button" value="True" onClick="True()" />

<h2 id="score">Score: 0<h2>

Upvotes: 1

Savv
Savv

Reputation: 431

Instead of having a <script> tag, have a <span> tag and give it an ID:

<h2>Score: <span id="totalscore"></span>

Now have your function edit the HTML of that span like so:

document.getElementById("totalscore").innerHTML = total;

Upvotes: 0

Related Questions