specifying the index of new elements being added to an array via a loop javascript

Question

I am trying to make a small question web app using javascript/html. Currently the app is able to keep a track of which question is currently visible on the page. There are 2 buttons on the page, a next and a previous button. When the user selects an radio button, the value of that radio button is pushed onto an array that keeps a track of the users answers. What I would like to do is, add the value of the radio button the user has chosen to a specific index in the new "savedAns" array. Because the variable "count" keeps a track of the currently visible questions, is there a way to push the value of each radio button to its corresponding index "count" each time?

 let savedAns = []; const radios = document.getElementsByName('answer'); const nextBtn = document.getElementById('next'); const prevBtn = document.getElementById('prev'); const quizes = document.querySelectorAll('.quiz'); const total = quizes.length; //keep a track of which question is visible let count = 0; //function to hide all the quizes const hide = function() { quizes.forEach((element) => { element.style.display = 'none' }) } //show and hide divs when user presses next nextBtn.addEventListener('click', function() { if (count < total - 1) { count++; prevCount++; radios.forEach((element) => { if (element.checked) { savedAns.push(element.value) } }) } else { alert('no more questions left') return } hide(); quizes[count].style.display = 'block' }) prevBtn.addEventListener('click', function() { if (count > 0) { count--; } else { alert('no more previous questions') return } hide(); quizes[count].style.display = 'block' })

 <div class="quiz"> <p>Question 1</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> <div class="quiz" style="display: none;"> <p>Question 2</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> <div class="quiz" style="display: none;"> <p>Question 3</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> <button id="prev">Prev</button> <button id="next">Next</button>

Any information towards the right direction is greatly appreciated. Thank you.

Answer 1

Reassing Elements

array[i] = x

Instead of using push store the element at the position of count reassign the elements .

Own Class Names

In this solution there is also a change to the structure of class names. To always get only the options of the current question the input of the questions have a classname corresponding to its count. First question class = "quiz1" , the second class = "quiz2" and so on.

Inside the event listener function we can than get the inputs of the current question with

document.getElementsByClassName(`quiz${count+1}`)

You can check witch of these radio buttons is checked in a loop and assign the value of the checked one to the array at position count.

 if (x.checked) {
        savedAns[count] = x.value;

 let savedAns = []; const radios = document.getElementsByName('answer'); const nextBtn = document.getElementById('next'); const prevBtn = document.getElementById('prev'); const quizes = document.querySelectorAll('.quiz'); // Add to all quizes inputs the specific class names // Here is the updated part quizes.forEach((x, ind) => [...x.children].forEach((y) => { if(y.tagName.toLowerCase() === 'input'){ y.classList.add(`quiz${ind+1}`); } })) const total = quizes.length - 1; //keep a track of which question is visible let count = 0; //function to hide all the quizes const hide = function() { quizes.forEach((element) => { element.style.display = 'none' }) } //show and hide divs when user presses next nextBtn.addEventListener('click', function() { if (count < total) { const currentAnswers = [...document.getElementsByClassName(`quiz${count+1}`)]; currentAnswers.forEach((x, i) => { if (x.checked) { savedAns[count] = x.value; console.log(savedAns); } }) count++; } else { alert('no more questions left') return } hide(); quizes[count].style.display = 'block' }) prevBtn.addEventListener('click', function() { if (count > 0) { const currentAnswers = [...document.getElementsByClassName(`quiz${count+1}`)]; currentAnswers.forEach((x, i) => { if (x.checked) { savedAns[count] = x.value; console.log(savedAns); } }) count--; } else { alert('no more previous questions') return } hide(); quizes[count].style.display = 'block' })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="quiz"> <p>Question 1</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> <div class="quiz" style="display: none;"> <p>Question 2</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> <div class="quiz" style="display: none;"> <p>Question 3</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> <button id="prev">Prev</button> <button id="next">Next</button>