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>
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>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><!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>