[英]specifying the index of new elements being added to an array via a loop javascript
I am trying to make a small question web app using javascript/html.我正在尝试使用 javascript/html 提出一个小问题 web 应用程序。 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.
页面上有 2 个按钮,一个下一个按钮和一个上一个按钮。 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.
我想做的是,将用户选择的单选按钮的值添加到新的“savedAns”数组中的特定索引中。 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?
因为变量“count”会跟踪当前可见的问题,有没有办法每次将每个单选按钮的值推送到其对应的索引“count”?
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.
谢谢你。
array[i] = x数组[i] = x
Instead of using push store the element at the position of count reassign the elements .而不是使用 push将元素存储在计数的 position重新分配元素。
In this solution there is also a change to the structure of class names.在此解决方案中,class 名称的结构也发生了变化。 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.第一个问题
class = "quiz1"
,第二个问题class = "quiz2"
等等。
Inside the event listener function we can than get the inputs of the current question with在事件侦听器 function 中,我们可以通过以下方式获取当前问题的输入
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.您可以检查这些单选按钮是否在循环中被选中,并将选中的值分配给 position 计数的数组。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.