Форум

notOldFagFromRussia · #1 (**permalink**) 08.11.2018, 18:31

Всем привет. Возникла следующая проблема:
Нажимая на кнопку функция снизу должна переключаться с вопроса на вопрос.
Срабатывает всего один раз.

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>

рони · #2 (**permalink**) 08.11.2018, 18:56

notOldFagFromRussia,
а цикл зачем?

рони · #3 (**permalink**) 08.11.2018, 19:04

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>

рони · #4 (**permalink**) 08.11.2018, 19:17

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>

Форум

Справочник

Discord чат

Курсы javascript