Блог

Главная - Вопросы по программированию - Есть ли способ заставить мою кнопку (Далее) отображать вопросы каждый раз, когда пользователь нажимает на нее?

Есть ли способ заставить мою кнопку (Далее) отображать вопросы каждый раз, когда пользователь нажимает на нее?

#javascript

Вопрос:

Я пытаюсь создать приложение для викторины, которое отображает вопрос каждый раз, когда пользователь нажимает кнопку (далее), но все мои попытки не увенчались успехом, я поделюсь своими строками кода ниже

 let Qustions = [{
  question1 :"What is 2 8 ? ",
  question2:" How many legs does the spider have ? ",
  question3 : " what is the capital of Russia ?",
}]

let display = document.querySelector('h3');
let btn = document.getElementById('next');

btn.addEventListener('click', ()=>{
  display.innerText = Qustions[0].question1;
  display.innerText = Qustions[0].question2;
  display.innerText = Qustions[0].question3;
  
}) 
 .container{
  background-color: lightblue;
  width:400px;
  margin:10em auto;
  padding:20px;
}
h3{
  text-align:center;
}
h2{
  float:right;
  position:absolute;
  top:219px;
  right:750px;
  border-radius:10px;
}
#next{
  width:100px;
  padding:10px;
  border-radius:10px;
  background-color: yellowgreen;
  border-style:none;
  
} 
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quiz</title>
</head>
<body>
  <div class="container">
     <h3>Qustions will be displayed here</h3>
     <button id ="next" value ="submit"> Next</button>
    <h2 id ="score"></h2>
  </div>
</body>
</html>

я также попытался создать функцию, которая вызывает вопросы, которые у меня есть, но она всегда переходила к последнему вопросу и отображала его.

Ответ №1:

То, что вы здесь делаете, в основном перезаписывает display.innertText вопрос 3 каждый раз.

  btn.addEventListener('click', ()=>{
  display.innerText = Qustions[0].question1;
  display.innerText = Qustions[0].question2;
  display.innerText = Qustions[0].question3;
})

Вместо этого вам следует иметь a counter = 0 , и когда пользователь нажимает кнопку «Далее», вы увеличиваете счетчик на единицу.
Кроме того, вы не должны хранить свой вопрос в таком формате. Вместо этого вы должны использовать массив строк.

Весь код javascript должен быть:

 const QUESTIONS = [
   "What is 2 8?", 
   "How many legs does the spider have?", 
   "what is the capital of Russia?"
];

let counter = 0;
let display = document.querySelector('h3');
display.innerText = QUESTIONS[counter]

let btn = document.getElementById('next');

btn.addEventListener('click', ()=>{
   counter  ;
   display.innerText = QUESTIONS[counter]
})

Комментарии:

1. Работает идеально, спасибо ! Это было именно то, что мне было нужно 😉

Метки: ,