Estoy creando un juego de trivia que usa una variedad de objetos.
const questions = [ { question: 'What year did the United State become independent?', answers: [ { text: '1776', correct: true }, { text: '1676', correct: false }, { text: '1576', correct: false }, { text: '1876', correct: false } ] }, Creo que la forma correcta es obtener el índice de la respuesta correcta usando .find , obteniendo el índice de la respuesta seleccionada, luego use una declaración if para comparar los dos. Si coinciden, la consola registrará "correcto" o "incorrecto" de lo contrario. Tengo problemas para obtener el índice de corretAnswer y también selectedAnswer.
Cuando uso este código y lo registro en la consola, ambas variables devuelven indefinidas.
const answerButtons = document.querySelectorAll('.answers-btn');
function checkAnswer() { let correctAnswer = randomQuestion.answers.find((answer, index) => { return answer[index] === true; }) answerButtons.forEach((answerButton, index) => { answerButton.addEventListener('click', () => { let selectedAnswer = answerButton[index]; return selectedAnswer; }) }) } <button id="answers-btn-1" onclick="checkAnswer()" class="answers-btn"></button> <button id="answers-btn-2" onclick="checkAnswer()" class="answers-btn"></button> <button id="answers-btn-3" onclick="checkAnswer()" class="answers-btn"></button> <button id="answers-btn-4" onclick="checkAnswer()" class="answers-btn"></button>Traté de crear una solución con el menor código posible. Primero, no necesita agregar un detector de eventos a cada botón, simplemente puede hacer que cada llamada sea un índice específico de HTML. En segundo lugar, dado que está creando su lista de respuestas con una propiedad correct , no necesita repetirla. Simplemente obtenga el que el usuario seleccionó y verifique la propiedad.
Espero eso ayude.
const currentQuestion = 0; const questions = [{ question: 'What year did the United State become independent?', answers: [{ text: '1776', correct: true }, { text: '1676', correct: false }, { text: '1576', correct: false }, { text: '1876', correct: false } ] }] function checkAnswer(bntIndex) { let answer = questions[currentQuestion].answers[bntIndex]; console.log(answer.correct) } <button id="answers-btn-1" onclick="checkAnswer(0)" class="answers-btn">1</button> <button id="answers-btn-2" onclick="checkAnswer(1)" class="answers-btn">2</button> <button id="answers-btn-3" onclick="checkAnswer(2)" class="answers-btn">3</button> <button id="answers-btn-4" onclick="checkAnswer(3)" class="answers-btn">4</button>cuando llamas a .find((answer, index) , la answer será un objeto, por ejemplo { text: '1776', correct: true } , así que cuando return answer[index] === true está comprobando si, por ejemplo , { text: '1776', correct: true }[1] === true , pero dado que { text: '1776', correct: true } no tiene una propiedad 1 que siempre devolverá false , entonces .find lo hará volver indefinido.
Para obtener la respuesta correcta, simplemente haría
let correctAnswer = randomQuestion.answers.find((answer) => answer.correct); La misma idea para su forEach , answerButton ya es la respuesta, por lo que cuando let selectedAnswer = answerButton[index]; volverá indefinido.
probar
const questions = [ { question: 'What year did the United State become independent?', answers: [ { text: '1776', correct: true }, { text: '1676', correct: false }, { text: '1576', correct: false }, { text: '1876', correct: false }, ], }, ]; const correctAnswerIndex = questions[0].answers.findIndex((answer) => (answer.correct === true)) const correctAnswer = questions[0].answers[correctAnswerIndex]; console.log('correctAnswer', correctAnswer); const guess = '1776'; const userAnswerIndex = questions[0].answers.findIndex((answer) => (answer.text === guess)) const userAnswer = questions[0].answers[userAnswerIndex]; console.log('userAnswer', userAnswer); if (correctAnswer.text === userAnswer.text) { console.log('You win'); } Array.prototype.findIndex() devuelve la posición de índice del primer elemento coincidente, a diferencia de Array.prototype.find() que devuelve el primer elemento coincidente.
El parámetro findIndex es una función que devuelve verdadero o falso. Si se evalúa como verdadero, devuelve la posición de índice del elemento coincidente.
También hay otras formas de hacerlo, como por ejemplo:
const guess = '1776'; const answer = questions[0].answers.find((answer) => (answer.text === guess)) if (answer.correct === true) { console.log('You win'); }