Estoy trabajando en un juego de preguntas, en este momento estoy tratando de entender cómo puedo eliminar la capacidad de seleccionar otra opción después de que ya se haya hecho clic en una. A partir de ahora, cuando haga clic en una respuesta, si es correcta, se iluminará en verde o la respuesta incorrecta se iluminará en rojo, mientras que la respuesta correcta se iluminará en verde independientemente. pero el problema es que todavía puedo hacer clic en las otras opciones y se resaltarán en rojo. ¿Puede alguien ayudarme con esto?
Repositorio: https://github.com/JacobPacheco100/Quiz-Games
// BTN OPTION EVENT options.forEach((op) => { op.addEventListener("click", (e) => { const choice = e.currentTarget; const choiceClass = e.currentTarget.classList; if (choiceClass.contains(answerList[currentQuestion])) { choice.style.backgroundColor = "green"; } else { choice.style.backgroundColor = "red"; } correct(); }); }); // HIGHLIGHT CORRECT OPTION function correct() { options.forEach((op) => { if (op.classList.contains(answerList[currentQuestion])) { op.style.backgroundColor = "green"; } }); }Creo que deberías usar el tipo "radio" <input /> en el archivo html para las opciones. Evitará seleccionar múltiples opciones. Recuerde actualizar javascript también. Pregunta si no te quedó claro.
1. deshacerse de la función anónima dentro de AddEventListener
2. código de movimiento, que estaba dentro de la función anónima dentro de la función con nombre
const checkAnswer = (e) => { const choice = e.currentTarget; const choiceClass = e.currentTarget.classList; if (choiceClass.contains(answerList[currentQuestion])) { choice.style.backgroundColor = "green"; } else { choice.style.backgroundColor = "red"; } correct(); } options.forEach((op) => { op.addEventListener("click", checkAnswer); }); // HIGHLIGHT CORRECT OPTION function correct() { options.forEach((op) => { if (op.classList.contains(answerList[currentQuestion])) { op.style.backgroundColor = "green"; op.removeEventListener("click", checkAnswer) } }); }