Displaying shuffles answers in an array in their tags-CodePudding

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 >
            <button id="answer1" ></button>
            <button id="answer2" ></button>
            <button id="answer3" ></button>
            <button id="answer4" ></button>
        </div>

After putting my answers and question in an array object, I shuffled them with lodash and was able to display the question in its right tag, how do I display the Shuffled answers in the answerTag. I keep getting errors of trouble reading text in my .foreach function.

CodePudding user response：

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],
        ],
    },
];

why you need a [number]?, i think the array should be

const myQuestions = [
    {
        question: "What's 2 2?",
        answers: [
            { text: "4", correct: true },
            { text: "2", correct: false },
            { text: "10", correct: false },
            { text: "1", correct: false },
        ],
    },
];

CodePudding user response：

Why do you have [0] [1] [2] [3] at the end of your answers array objects?

Kindly remove them and try again. Coz this is incorrect.

CodePudding user response：

First you have collect the buttons. Then you iterate the buttons and put the text to every single button. Like that:

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 >
            <button id="answer1" ></button>
            <button id="answer2" ></button>
            <button id="answer3" ></button>
            <button id="answer4" ></button>
        </div>