Solo quiero incrementar el puntaje en un cuadro, pero se incrementa en 2 lugares. mi código:
var homescore = document.getElementById('home-score') var guestscore = document.getElementById('guest-score') var i = 0; function add1() { i++; homescore.innerHTML = i } var i = 0 function add2() { i += 2 homescore.innerHTML = i } var i = 0 function add3() { i += 3 homescore.innerHTML = i } var i = 0; function add1g() { i++; guestscore.innerHTML = i } var i = 0 function add2g() { i += 2 guestscore.innerHTML = i } var i = 0 function add3g() { i += 3 guestscore.innerHTML = i }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>BasketBall Score Board</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="left-side"> <h1 class="left-title">HOME</h1> <br /> <h1 class="home-score" id="home-score">0</h1> <button id="add1" onclick="add1()">+1</button> <button id="add2" onclick="add2()">+2</button> <button id="add3" onclick="add3()">+3</button> </div> <div class="right-side"> <h1 class="right-title">GUEST</h1> <br /> <h1 class="guest-score" id="guest-score">0</h1> <button id="add1" onclick="add1g()">+1</button> <button id="add2" onclick="add2g()">+2</button> <button id="add3" onclick="add3g()">+3</button> </div> </div> <script src="script.js"></script> </body> </html> Por ejemplo, si hago clic en el botón +1 en la casa y lo incremento a 9. Y luego, hago clic en +1 en el invitado, muestra 10 en el invitado. Quiero valores diferentes para cada caja. Si hago clic en +1 en INICIO, debería incrementarse a 1 y luego, si hago clic en +1 en invitado, debería incrementarse a 1, no a 2. Y si es posible, dígame una forma más corta de escribir este código. GRACIAS
un par de cosas: recomendaría evitar el uso de var . Utilice let o const en su lugar. ¿Por qué?
Declarar la misma variable nuevamente asigna un nuevo valor a esa variable, eliminando su referencia (o relación) a los datos a los que se refería anteriormente.
Primitivas frente a tipos de datos de referencia
A continuación he refactorizado su código. Puedes probarlo.
archivo script.js:
const homescore = document.getElementById("home-score"); const guestscore = document.getElementById("guest-score"); let homescoreCount = 0; function add(num) { homescoreCount += num; homescore.innerHTML = homescoreCount; } let guestscoreCount = 0; function addG(num) { guestscoreCount += num; guestscore.innerHTML = guestscoreCount; }También cambiaría la forma en que se llama a la función en su 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>BasketBall Score Board</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="left-side"> <h1 class="left-title">HOME</h1> <br /> <h1 class="home-score" id="home-score">0</h1> <button id="add1" onclick="add(1)">+1</button> <button id="add2" onclick="add(2)">+2</button> <button id="add3" onclick="add(3)">+3</button> </div> <div class="right-side"> <h1 class="right-title">GUEST</h1> <br /> <h1 class="guest-score" id="guest-score">0</h1> <button id="add1" onclick="addG(1)">+1</button> <button id="add2" onclick="addG(2)">+2</button> <button id="add3" onclick="addG(3)">+3</button> </div> </div> <script src="script.js"></script> </body> </html>Espero que esto ayude. No tengas miedo de hacer preguntas y, lo que es más importante, sigue aprendiendo.
En lugar de usar
var i = 0; function add1() { i++; homescore.innerHTML = i }Tratar de usar,
var i = 0; function add1() { i += 1; homescore.innerHTML = i }Si alguien está interesado en una solución minimalista peculiar, aquí está:
document.querySelector(".container").onclick=ev=>{ let d=ev.target.closest(".right-side,.left-side")?.querySelector("h1[class$=score]") if (d) { d.textContent=+d.textContent+(+ev.target.textContent) } else if (ev.target.tagName=="BUTTON") // reset all document.querySelectorAll("h1[class$=score]").forEach(h=>h.textContent="0"); } <div class="container"> <div class="left-side"> <h1 class="left-title">HOME</h1> <br /> <h1 class="home-score" id="home-score">0</h1> <button>-1</button> <button>+1</button> <button>+2</button> <button>+3</button> </div> <div class="right-side"> <h1 class="right-title">GUEST</h1> <br> <h1 class="guest-score" id="guest-score">0</h1> <button>-1</button> <button>+1</button> <button>+2</button> <button>+3</button> </div><br> <button>reset all scores</button> </div>