const btn_start = document.getElementById("start"); let container = document.getElementById("container"); let questionTag = document.getElementById("question"); let answerTag = document.getElementsByClassName("answer"); btn_start.addEventListener("click", startQuiz); const myQuestions = [ { question: "What's 2+2?", answers: [ { text: "4", correct: true }, { text: "2", correct: false }, { text: "10", correct: false }, { text: "1", correct: false }, ], }, ]; function startQuiz() { container.style.visibility = "visible"; btn_start.style.visibility = "hidden"; showQuestion(myQuestions[0]); } function showQuestion(questionAndAnswers) { const shuffledAnswers = _.shuffle(questionAndAnswers.answers); questionTag.innerText = questionAndAnswers.question; shuffledAnswers.forEach((answer, idx) => { }); } <h3 id="question"></h3> <div class="answers"> <button id="answer1" class="answer"></button> <button id="answer2" class="answer"></button> <button id="answer3" class="answer"></button> <button id="answer4" class="answer"></button> </div>Después de poner mis respuestas y mi pregunta en un objeto de matriz, las mezclé con lodash y pude mostrar la pregunta en su etiqueta correcta, ¿cómo muestro las respuestas aleatorias en la etiqueta de respuesta? Sigo recibiendo errores de problemas para leer texto en mi función .foreach.
const myQuestions = [ { question: "What's 2+2?", answers: [ { text: "4", correct: true }[0], { text: "2", correct: false }[1], { text: "10", correct: false }[2], { text: "1", correct: false }[3], ], }, ];¿Por qué necesitas un [número]? Creo que la matriz debería ser
const myQuestions = [ { question: "What's 2+2?", answers: [ { text: "4", correct: true }, { text: "2", correct: false }, { text: "10", correct: false }, { text: "1", correct: false }, ], }, ];¿Por qué tiene [0] [1] [2] [3] al final de sus objetos de matriz de respuestas?
Por favor, elimínelos y vuelva a intentarlo. Porque esto es incorrecto.
Primero tienes que recoger los botones. Luego itera los botones y coloca el texto en cada botón. Como eso:
const answers = [ { text: "4", correct: true }, { text: "2", correct: false }, { text: "10", correct: false }, { text: "1", correct: false }, ]; const at = document.querySelectorAll('.answer'); for (let i = 1; i <= at.length; ++i) { at[i-1].innerHTML = answers[i-1].text; } <h3 id="question"></h3> <div class="answers"> <button id="answer1" class="answer"></button> <button id="answer2" class="answer"></button> <button id="answer3" class="answer"></button> <button id="answer4" class="answer"></button> </div>