Estoy tratando de hacer un contador de preguntas correctas e incorrectas que muestre grupos de 4.
Si hago clic en la primera respuesta correcta, el contador funciona correctamente y aumenta a medida que hago clic, pero no funciona con la segunda respuesta correcta. Lo mismo sucede con las respuestas incorrectas.
Estos son los códigos que uso, alguien podría ayudarme? Gracias
CÓDIGO HTML:
¿Which of the following operations results in 8? <input class="solucioncorrecta" value="6+2"> <input class="solucioncorrecta" value="7+1"> <input class="solucionincorrecta" value="1+1"> <input class="solucionincorrecta" value="2+2">Y el CÓDIGO JS:
<!-- CONTADOR FALLOS TEST --> <script type="text/javascript"> var root = document.querySelector('.solucionincorrecta'); root.onclick = function() { var elem = document.getElementById('contadorfallos'); elem.innerHTML = +elem.innerText + 1; }; </script> <!-- CONTADOR FALLOS TEST --> <!-- CONTADOR ACIERTOS TEST --> <script type="text/javascript"> var root = document.querySelector('.solucioncorrecta'); root.onclick = function() { var elem = document.getElementById('contadoraciertos'); elem.innerHTML = +elem.innerText + 1; }; </script>El problema es que está utilizando document.querySelector() y no document.querySelectorAll()
document.querySelector() Devuelve la primera coincidencia
document.querySelectorAll() Devuelve todas las coincidencias
Como resultado, solo está configurando una propiedad onclick en los primeros elementos .correcta e .incorrecta , no en todos.
Para configurar esto en todos ellos, debe hacer dos cosas:
document.querySelectorAll() en lugar de document.querySelector() . Esto devuelve una lista (específicamente, una NodeList ) de elementos coincidentes.onclick a cada uno de ellos. Hay muchas formas de recorrer una NodeList, enumeradas aquí .Aquí hay un ejemplo:
// get all incorrect elements var incorrectElements = document.querySelectorAll('.incorrecta'); // loop over each elements for (var element of incorrectElements) { // add an onclick element.onclick = incorrectClickHandler } // this is the function being called by onclick function incorrectClickHandler() { score.innerText = parseInt(score.innerText) - 1; }Sería mejor si subes tus códigos completos. Pero de todos modos te escribo algunas notas que probablemente respondan a tu pregunta.
-no use el mismo nombre (raíz) para su .correcta e .incorrecta
-en su segundo <script> , no definió el button como un objeto. Entonces el navegador no puede entenderlo.