Soy bastante nuevo en HTML y JS y esta es una parte más pequeña de un proyecto más grande en el que estoy trabajando. Lo que estoy tratando de hacer es hacer que el número en la pantalla cambie cada vez que se hace clic en cualquiera de los botones. Tal como está, cuando hago clic en el botón, el valor de 'puntuación' cambia pero no se actualiza en la página. Intenté usar setInterval en el documento. escribir en el cuerpo y eso no funcionó. Estoy muy atascado y cualquier ayuda es apreciada, gracias.
<!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>Debe usar el valor de puntaje actual y colocarlo en algún lugar después de cada actualización.
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>puede definir una función para inyectar el valor. y también, puede inyectar el valor una vez que el documento se cargue por completo
<!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>