Quiero que cuando el usuario haga clic en una opción del cuestionario no pueda volver a hacer clic en ella. Para eso, necesito salir de "for loop" (al final de este código), pero cuando escribo una declaración de interrupción, de alguna manera es incorrecta. ¿Podrías decirme la forma correcta de hacerlo? Agradecería mucho la respuesta! :)
<script> document.addEventListener("DOMContentLoaded", function() { function clicked(answer, i) { if (answer[i].value == "correct") { answer[i].style.backgroundColor = "green"; let result = "<p>Correct!</p>"; document.getElementsByClassName("section")[0].insertAdjacentHTML('beforeend', result); return; } else { answer[i].style.backgroundColor = "red"; let result = "<p>Wrong!</p>"; document.getElementsByClassName("section")[0].insertAdjacentHTML('beforeend', result); return; } } let answer = document.getElementsByTagName('button'); for (let i = 0; i < answer.length; i++) { answer[i].addEventListener("click", () => { { clicked(answer, i); } }); } }); </script>Tu logica esta mal...
Su ciclo for está configurando el evento de clic en todas sus respuestas, romperlo solo significaría que no agregaría el evento en todas las respuestas.
Lo que tienes que hacer es:
Por ejemplo :
<script> var hasBeenClickedOn = false; // global flag document.addEventListener("DOMContentLoaded", function() { function clicked(answer, i) { if (hasBeenClickedOn===true) { return false; } // check the flag hasBeenClickedOn = true; // set the flag if (answer[i].value == "correct") { answer[i].style.backgroundColor = "green"; let result = "<p>Correct!</p>"; document.getElementsByClassName("section")[0].insertAdjacentHTML('beforeend', result); return; } else { answer[i].style.backgroundColor = "red"; let result = "<p>Wrong!</p>"; document.getElementsByClassName("section")[0].insertAdjacentHTML('beforeend', result); return; } } let answer = document.getElementsByTagName('button'); for (let i = 0; i < answer.length; i++) { answer[i].addEventListener("click", () => { { clicked(answer, i); } }); } }); </script>