Estoy creando un cuestionario, y estoy tratando de cambiar mi botón de respuesta a verde cuando es correcto y cuando es incorrecto a rojo y luego guardar esta información y pasar a la siguiente pregunta. Sin embargo, el código en este momento no funciona. Este es mi código JavaScript:
let shuffledQuestions, currentQuestionIndex; const setNextQuestion = () => { showQuestion(shuffledQuestions[currentQuestionIndex]); } const showQuestion = (gameData) => { questionElement.innerText = gameData.question; let answersBlock = ''; gameData.answer.forEach((answer, index) => { const answerButton = ` <div class="answers-wrapper col-lg-6 col-md-6 col-lg-3"> <button class="btn answer-button" id="answersbutton-${index + 1}" onclick="selectAnswer()"> ${answer.text} </button> </div> `; answersBlock += answerButton; }); answerButtonsElement.innerHTML = answersBlock; } const selectAnswer = (e) => { const selectedButton = e.target; const correct = selectedButton.dataset.correct; setStatusClass(document.body, correct); Array.from(answerButtonsElement.children).forEach(button => { setStatusClass(button, button.dataset.correct); }) } function setStatusClass(element, correct) { clearStatusClass(element); if (correct) { element.classList.add('correct'); } else { element.classList.add('wrong'); } } function clearStatusClass(element) { element.classList.remove('correct'); element.classList.remove('wrong'); } const gameData = [ { question: 'What is the smallest country in the world?', answer: [ { text: 'Vatican City', correct: true }, { text: 'Malta', correct: false }, { text: 'Italy', correct: false }, { text: 'Monaco', correct: false } ] },Debe pasar el evento como un parámetro en onclick porque está usando el evento en HTML y llamándolo directamente.
const answerButton = ` <div class="answers-wrapper col-lg-6 col-md-6 col-lg-3"> <button class="btn answer-button" id="answersbutton-${index + 1}" onclick="selectAnswer(event)"> ${answer.text} </button> </div> `; Y obténgalo como event.target en la función selectAnswer .
function selectAnswer(event) { console.log("Button", event.target) }