How to iterate over unique id names without hardcoding?-CodePudding

I am making a quiz. I would like to iterate over the different buttons to bring up different questions once I press the buttons. However, since each button has a different id, I am finding it difficult to find a way of changing the id names in the loop. See below for code:

let mybtn1 = document.getElementById("myBtn1")
let questions = [
    {
        question : "What is an Epidemics?",
        choiceA : "CorrectA",
        choiceB : "WrongB",
        choiceC : "WrongC",
        choiceD: "Hello",
        correct : "Hello"
    },{
        question : "What does CSS stand for?",
        choiceA : "Wrong",
        choiceB : "Correct",
        choiceC : "Wrong",
        correct : "B"
    },{
        question : "What does JS stand for?",
        choiceA : "Wrong",
        choiceB : "Wrong",
        choiceC : "Correct",
        correct : "C"
    }
];

mybtn1.addEventListener("click", pressbtn);
function pressbtn(){
  modal.style.display = "block";
  questionText.innerHTML = questions[0].question; 
  answerA.innerHTML = questions[0].choiceA;
  answerB.innerHTML = questions[0].choiceB;
  answerC.innerHTML = questions[0].choiceC;
  answerD.innerHTML = questions[0].choiceD;

}

<ul >
                    <li  id="myBtn1"></li>
                    <li  id="myBtn2"></li>
                    <li  id="myBtn3"></li>
                    <li  id="myBtn4"></li>
                </ul>

For example, when I click the button with id='mybtn1', it should iterate to give me access to questions[0] and so then I can manipulate the innerHTML. For id='mybtn2', questions[1] and so on. How could I write a loop to help me iterate this?

CodePudding user response：

You can just give the buttons the same class or data-attribute, and you can select them with querySelectorsAll and loop through, and with its index, you can iterate through.

For example all button has the data-question attribute.

Get them like

const questions = document.querySelectorsAll('[data-question]')

And loop through

questions.forEach((index) => {
question.addEventListener("click", () => pressbtn(index));
function pressbtn(index){
  modal.style.display = "block";
  questionText.innerHTML = questions[index].question; 
  answerA.innerHTML = questions[index].choiceA;
  answerB.innerHTML = questions[index].choiceB;
  answerC.innerHTML = questions[index].choiceC;
  answerD.innerHTML = questions[index].choiceD;

}
})

CodePudding user response：

Well, there are several ways to make that. Using vanilla javascript you can call a function when clicking a button, pass the id to the function and create the li with that data

    <button id="0" click = changeButtons(id)>
    <ul id="buttonList>
    </ul>


//change buttons
changeButtons (id){
 let list =document.getElementbyId(buttonList)
 let questions = []
 questions[id].forEach(question => {
 list.innerHtml  = <li><button> question</button> </li>
})
}

note that you have to alter your json to make an array with the questions, you also can use keys to make an array with your questions keys and access to that