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>
4 answers
solution1
0 2022-07-20 20:22:51
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>
solution2
0 2022-07-20 20:27:51
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>solution3
0 2022-07-20 20:30:52
<!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>
solution4
0 2022-07-20 20:44:07
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.