Функция при нажатии срабатывает один раз и больше не работает
Всем привет. Возникла следующая проблема:
Нажимая на кнопку функция снизу должна переключаться с вопроса на вопрос. Срабатывает всего один раз. this.nextQuestButton.onclick = function() { this.getQuestions = document.querySelectorAll(".question"); for (i = 1; i < this.getQuestions.length; i++) { this.getQuestions[i].style.display="block"; var prevQuest = this.getQuestions[i - 1]; prevQuest.style.display="none"; return getQuestions[i]; } } В чем проблема то, не пойму? <div class="questions"> <div class="question question_one" style="display: none">Как дела?</div> <div class="question question_two" style="display: none">Сколько лет?</div> <div class="question question_three" style="display: none">Скучаешь?</div> <div class="question question_four" style="display: none">Гул го?</div> </div> <a href="#" class="button next_quest" style="display: none">Следующий вопрос</a> |
notOldFagFromRussia,
а цикл зачем? |
notOldFagFromRussia,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script> window.addEventListener('DOMContentLoaded', function() { var arr = ["Как дела?","Сколько лет?","Скучаешь?","Гул го?"]; var node = document.querySelector('.slider'), btn = document.querySelector('.btn'); btn.addEventListener('click', function() { node.innerHTML = arr.length ? arr.shift() : "ваш результат"; }); }); </script> </head> <body> <div class="slider">чтобы пройти тест нажмите кнопку ниже</div> <input class="btn" type="button" value="next"> </body> </html> |
notOldFagFromRussia,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .question{ display: none; } .question.show{ display: block; } </style> <script> window.addEventListener('DOMContentLoaded', function() { var getQuestions = document.querySelectorAll(".question"), i = 0, len = getQuestions.length - 1 nextQuestButton = document.querySelector('.next_quest'); nextQuestButton.addEventListener('click', function(event) { event.preventDefault(); if(i < len) { getQuestions[i++].classList.remove("show"); getQuestions[i].classList.add("show"); } }); }); </script> </head> <body> <div class="questions"> <div class="question question_one show" >Как дела?</div> <div class="question question_two" >Сколько лет?</div> <div class="question question_three" >Скучаешь?</div> <div class="question question_four" >Гул го?</div> </div> <a href="#" class="button next_quest" >Следующий вопрос</a> </body> </html> |
Часовой пояс GMT +3, время: 20:22. |