I am attempting to link a div's text with a variable that changes its value based on different button clicks (using plain JavaScript), but I am struggling to update the inner HTML dynamically. It only displays the initial value set on page load. What am I missing? As a JavaScript student, any help is appreciated.
var counter1=0;
var counter2=0;
var counter3=0;
var countertotal=counter1+counter2+counter3;
document.getElementById("text").innerHTML= "Total" + " " + parseInt(countertotal);
function count1() {
document.getElementById("button1").innerHTML =parseInt(counter1);
counter1++;
}
function count2() {
document.getElementById("button2").innerHTML =parseInt(counter2);
counter2++;
}
function count3() {
document.getElementById("button3").innerHTML =parseInt(counter3);
counter3++;
}<html>
<body>
<div id='text' style="font-size:50px"></div>
<button style= "width:400px; height:150px; font-size:100px;
display:block" id="button1" onclick="count1()"></button>
<button style="width:400px;height:150px; font-size:100px;
display:block" id="button2" onclick="count2()"></button>
<button style="width:400px;height:150px;font-size:100px;display:block" id="button3" onclick="count3()"></button>
</body>
</html>