Tengo una variable de puntaje y trato de agregarle 1 cada vez que se hace clic en una palabra y mostrar el puntaje en la página web. Aquí está el html:
<p>1. The <span id="noun">dog</span> and the <span id="noun">kitten</span> play with the <span id="noun">ball</span>.</p> <h3>Score: <span id="results1"></span> out of 9</h3>y aquí está el javascript:
var nounAll = document.querySelectorAll('#noun'); var score = 0; var result1 = document.querySelector('#result1'); for(var i = 0; i < nounAll.length; i++) { console.log(nounAll[i].textContent) nounAll[i].addEventListener("mouseover",function() { this.classList.add("hovered") }); nounAll[i].addEventListener("mouseout", function() { this.classList.remove("hovered") }); nounAll[i].addEventListener("click", function() { this.classList.toggle("clickedOn") score++; }); } document.getElementById("results1").textContent = score;¿Qué estoy haciendo mal?
Su variable de score está funcionando bien. Solo necesita actualizar el elemento Score:
nounAll[i].addEventListener("click", function() { this.classList.toggle("clickedOn") score++; // Add the below line document.getElementById("results1").textContent = score; });El problema es que después de que se activa el evento de clic, no asigna la nueva puntuación a su elemento DOM de destino en cada acción.
nounAll[i].addEventListener("click", function() { this.classList.toggle("clickedOn") score++; document.getElementById("results1").textContent = score; // add this line to your click event handler }); var nounAll = document.querySelectorAll('#noun'); var score = 0; var result1 = document.querySelector('#result1'); for(var i = 0; i < nounAll.length; i++) { console.log(nounAll[i].textContent) nounAll[i].addEventListener("mouseover",function(e) { e.target.classList.add("hovered") }); nounAll[i].addEventListener("mouseout", function(e) { e.target.classList.remove("hovered") }); nounAll[i].addEventListener("click", function(e) { e.target.classList.toggle("clickedOn") score++; document.getElementById("results1").textContent = score; }); } <p>1. The <span id="noun">dog</span> and the <span id="noun">kitten</span> play with the <span id="noun">ball</span>.</p> <h3>Score: <span id="results1"></span> out of 9</h3>