JavaScript - Как показать следующий div и скрыть предыдущий?

Question

Я создаю простую викторину и хотел бы знать, как показывать один вопрос за раз, но только с использованием JavaScript. Я не знаю jQuery. По сути, я хотел бы, чтобы первый вопрос показывался автоматически.

Вот пример того, что мой HTML выглядит следующим образом:

<div id="q0"> 
    <li> 
     <h3>1. The color of the sky is... </h3> 
     <input type="radio" name="question0" value="A">Green<br> 
     <input type="radio" name="question0" value="B">Blue<br> 
     <input type="radio" name="question0" value="C">Red<br> 
     <input type="radio" name="question0" value="D">Purple<br> 
    </li> 
</div> 
<div id="q1" style="visibility:hidden"> 
    <li> 
     <h3>2. Paper comes from... </h3> 
     <input type="radio" name="question1" value="A">Water<br> 
     <input type="radio" name="question1" value="B">Cement<br> 
     <input type="radio" name="question1" value="C">Trees<br> 
     <input type="radio" name="question1" value="D">The Sky<br> 
    </li> 
</div> 
<div id="q2" style="visibility:hidden"> 
    <li> 
     <h3>3. How many hours in a day? </h3> 
     <input type="radio" name="question2" value="A">24<br> 
     <input type="radio" name="question2" value="B">22<br> 
     <input type="radio" name="question2" value="C">16<br> 
     <input type="radio" name="question2" value="D">48<br> 
    </li> 
</div> 

я в настоящее время не имеют скрипт для показа следующего DIV и скрывает предыдущую, потому что я не знаю, как даже начать.

Я ищу, чтобы он положил в эту форму ...

function nextQ(){ 
    // code 
} 

... и для того, чтобы называться этой кнопкой:

<button onclick="next()">Next Question</button> 

Я действительно нового HTML и JavaScript и были бы признательны за любую помощь.

Спасибо.

Answer 1

Pure версия JavaScript (конфигурации):

var showing = [1, 0, 0]; 
 
var questions = ['q0', 'q1', 'q2']; 
 
function next() { 
 
    var qElems = []; 
 
    for (var i = 0; i < questions.length; i++) { 
 
     qElems.push(document.getElementById(questions[i])); 
 
    } 
 
    for (var i = 0; i < showing.length; i++) { 
 
     if (showing[i] == 1) { 
 
      qElems[i].style.display = 'none'; 
 
      showing[i] = 0; 
 
      if (i == showing.length - 1) { 
 
       qElems[0].style.display = 'block'; 
 
       showing[0] = 1; 
 
      } else { 
 
       qElems[i + 1].style.display = 'block'; 
 
       showing[i + 1] = 1; 
 
      } 
 
      break; 
 
     } 
 
    }  
 
}

<div id="questions"> 
 
<div id="q0"> 
 
<h3>1. The color of the sky is... </h3> 
 
<input type="radio" name="question0" value="A">Green<br> 
 
<input type="radio" name="question0" value="B">Blue<br> 
 
<input type="radio" name="question0" value="C">Red<br> 
 
<input type="radio" name="question0" value="D">Purple<br> 
 
</div> 
 
<div id="q1" style="display: none"> 
 
<h3>2. Paper comes from... </h3> 
 
<input type="radio" name="question1" value="A">Water<br> 
 
<input type="radio" name="question1" value="B">Cement<br> 
 
<input type="radio" name="question1" value="C">Trees<br> 
 
<input type="radio" name="question1" value="D">The Sky<br> 
 
</div> 
 
<div id="q2" style="display: none"> 
 
<h3>3. How many hours in a day? </h3> 
 
<input type="radio" name="question2" value="A">24<br> 
 
<input type="radio" name="question2" value="B">22<br> 
 
<input type="radio" name="question2" value="C">16<br> 
 
<input type="radio" name="question2" value="D">48<br> 
 
</div> 
 
</div> 
 
    
 
<button onclick="next()">Next Question</button>

---

Чистая версия JavaScript (без конфигурации):

function next() { 
 
    var qElems = document.querySelectorAll('#questions>div'); 
 
    for (var i = 0; i < qElems.length; i++) { 
 
     if (qElems[i].style.display != 'none') { 
 
      qElems[i].style.display = 'none'; 
 
      if (i == qElems.length - 1) { 
 
       qElems[0].style.display = 'block'; 
 
      } else { 
 
       qElems[i + 1].style.display = 'block'; 
 
      } 
 
      break; 
 
     } 
 
    }  
 
}

<div id="questions"> 
 
<div id="q0"> 
 
<h3>1. The color of the sky is... </h3> 
 
<input type="radio" name="question0" value="A">Green<br> 
 
<input type="radio" name="question0" value="B">Blue<br> 
 
<input type="radio" name="question0" value="C">Red<br> 
 
<input type="radio" name="question0" value="D">Purple<br> 
 
</div> 
 
<div id="q1" style="display: none;"> 
 
<h3>2. Paper comes from... </h3> 
 
<input type="radio" name="question1" value="A">Water<br> 
 
<input type="radio" name="question1" value="B">Cement<br> 
 
<input type="radio" name="question1" value="C">Trees<br> 
 
<input type="radio" name="question1" value="D">The Sky<br> 
 
</div> 
 
<div id="q2" style="display: none;"> 
 
<h3>3. How many hours in a day? </h3> 
 
<input type="radio" name="question2" value="A">24<br> 
 
<input type="radio" name="question2" value="B">22<br> 
 
<input type="radio" name="question2" value="C">16<br> 
 
<input type="radio" name="question2" value="D">48<br> 
 
</div> 
 
</div> 
 
    
 
<button onclick="next()">Next Question</button>

---

JQuery версия:

$(function() { 
 
    $('.next').on('click', function() { 
 
     $('#questions>div').each(function() { 
 
      var id = $(this).index(); 
 
      if ($(this).is(':visible')) { 
 
       $(this).hide(); 
 
       if (id == $('#questions>div').length - 1) { 
 
        $('#questions>div').eq(0).show(); 
 
       } else { 
 
        $('#questions>div').eq(id + 1).show(); 
 
       } 
 
       return false; 
 
      } 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="questions"> 
 
<div id="q0"> 
 
<h3>1. The color of the sky is... </h3> 
 
<input type="radio" name="question0" value="A">Green<br> 
 
<input type="radio" name="question0" value="B">Blue<br> 
 
<input type="radio" name="question0" value="C">Red<br> 
 
<input type="radio" name="question0" value="D">Purple<br> 
 
</div> 
 
<div id="q1" style="display: none"> 
 
<h3>2. Paper comes from... </h3> 
 
<input type="radio" name="question1" value="A">Water<br> 
 
<input type="radio" name="question1" value="B">Cement<br> 
 
<input type="radio" name="question1" value="C">Trees<br> 
 
<input type="radio" name="question1" value="D">The Sky<br> 
 
</div> 
 
<div id="q2" style="display: none"> 
 
<h3>3. How many hours in a day? </h3> 
 
<input type="radio" name="question2" value="A">24<br> 
 
<input type="radio" name="question2" value="B">22<br> 
 
<input type="radio" name="question2" value="C">16<br> 
 
<input type="radio" name="question2" value="D">48<br> 
 
</div> 
 
</div> 
 
    
 
<button class="next">Next Question</button>

Answer 2

Вот код функции Java Script. Для этого вам нужно убедиться, что свойство отображения div должно быть указано как или в коде html. Также вам нужно называть идентификатор кнопки «следующей», чтобы она могла быть скрыта при достижении последней кнопки.

function nextQ(){ 
    var blockFound = 0; 
    var lastQuestion = 0; 
    var divs = document.getElementsByTagName("div"); 
    for(var i = 0; i < divs.length; i++){ 
    if (blockFound == 1){ 
    blockFound = 0; 
    divs[i].style.display = 'block'; 
    }else if (divs[i].style.display == 'block'){ 
    if (i + 2 == divs.length){ 
     lastQuestion = 1; 
    } 
    blockFound = 1; 
    divs[i].style.display = 'none'; 
    } 
} 
if (lastQuestion == 1){ 
    document.getElementById('next').style.visibility = 'hidden'; 
    } 
} 

Html код здесь.

<div id="q0" style="display:block"> 
<li> 
<h3>1. The color of the sky is... </h3> 
<input type="radio" name="question0" value="A">Green<br> 
<input type="radio" name="question0" value="B">Blue<br> 
<input type="radio" name="question0" value="C">Red<br> 
<input type="radio" name="question0" value="D">Purple<br> 
</li> 
</div> 
<div id="q1" style="display:none"> 
<li> 
<h3>2. Paper comes from... </h3> 
<input type="radio" name="question1" value="A">Water<br> 
<input type="radio" name="question1" value="B">Cement<br> 
<input type="radio" name="question1" value="C">Trees<br> 
<input type="radio" name="question1" value="D">The Sky<br> 
</li> 
</div> 
<div id="q2" style="display:none"> 
<li> 
<h3>3. How many hours in a day? </h3> 
<input type="radio" name="question2" value="A">24<br> 
<input type="radio" name="question2" value="B">22<br> 
<input type="radio" name="question2" value="C">16<br> 
<input type="radio" name="question2" value="D">48<br> 
</li> 
</div> 
<button id="next" onclick="nextQ()">Next Question</button> 

Answer 3

Это то, что вам нужно?

<div id="q0"> 
    <li> 
    <h3>1. The color of the sky is... </h3> 
    <input type="radio" name="question0" value="A">Green<br> 
    <input type="radio" name="question0" value="B">Blue<br> 
    <input type="radio" name="question0" value="C">Red<br> 
    <input type="radio" name="question0" value="D">Purple<br> 
    </li> 
    <button class="next" onclick="goNext(0)">Next Question</button> 
    </div> 

    <div id="q1" style="display:none"> 
    <li> 
    <h3>2. Paper comes from... </h3> 
    <input type="radio" name="question1" value="A">Water<br> 
    <input type="radio" name="question1" value="B">Cement<br> 
    <input type="radio" name="question1" value="C">Trees<br> 
    <input type="radio" name="question1" value="D">The Sky<br> 
    </li> 
    <button class="next" onclick="goNext(1)">Next Question</button> 
    </div> 

    <div id="q2" style="display:none"> 
    <li> 
    <h3>3. How many hours in a day? </h3> 
    <input type="radio" name="question2" value="A">24<br> 
    <input type="radio" name="question2" value="B">22<br> 
    <input type="radio" name="question2" value="C">16<br> 
    <input type="radio" name="question2" value="D">48<br> 
    </li> 
    <button class="next" onclick="goNext(2)">Next Question</button> 
    </div> 

    <script language=javascript> 
     function goNext(i) 
     { 
      document.getElementById("q"+i).style.display = 'none'; 
      i++; 
      document.getElementById("q"+i).style.display = 'block'; 
     } 
    </script> 

Answer 4

Хотя я согласен с @Bitwise при использовании jQuery вместо этого только на javascript, чтобы обеспечить совместимость между браузерами. Но поскольку вы настаиваете на использовании javascript, вот что вам следует делать.

1) Убедитесь, что ваш <li> прилагается в теге контейнера первым (скажем, <ul>), поэтому вы выполняете итерацию только по желаемому списку.

2) использовать display:none имущество вместо visibility:hidden. visibility:hidden просто скрывает элемент, но он все равно будет занимать то же место, что и раньше.display:none скрывает элемент, и он не займет ни одного места.

Вот обновленный код.

HTML:

<ul id="listContainer"> 
<div id="q0"> 
     <li style="display:list-item"> 
      <h3>1. The color of the sky is... </h3> 
      <input type="radio" name="question0" value="A"/>Green<br/> 
      <input type="radio" name="question0" value="B"/>Blue<br/> 
      <input type="radio" name="question0" value="C"/>Red<br/> 
       <input type="radio" name="question0" value="D"/>Purple<br/> 
     </li> 
    </div> 

    <div id="q1" > 
     <li style="display:none"> 
     <h3>2. Paper comes from... </h3> 
      <input type="radio" name="question1" value="A"/>Water<br/> 
      <input type="radio" name="question1" value="B"/>Cement<br/> 
      <input type="radio" name="question1" value="C"/>Trees<br/> 
       <input type="radio" name="question1" value="D"/>The Sky<br/> 
     </li> 
    </div> 
    <div id="q2" > 
     <li style="display:none"> 
     <h3>3. How many hours in a day? </h3> 
      <input type="radio" name="question2" value="A"/>24<br/> 
      <input type="radio" name="question2" value="B"/>22<br/> 
      <input type="radio" name="question2" value="C"/>16<br/> 
      <input type="radio" name="question2" value="D"/>48<br/> 
     </li> 
    </div> 
</ul> 
    <button id="next">next</button> 

Javascript:

document.getElementById('next').addEventListener("click",function(){ 

    var listContainer = document.getElementById("listContainer"); 
    var listItem = listContainer.getElementsByTagName("li"); 

    for (var i=0; i < listItem.length-1; i++) 
    { 
     if(listItem[i].style.display == "list-item") 
     { 
      listItem[i].style.display = "none"; 
      listItem[i+1].style.display = "list-item"; 
      break; 
     } 
    } 

}); 

Вот fiddle.

Cheers!

Answer 5

Я немного покрутил бы код. Добавить класс вопросов в каждый div, который действует как вопрос i.e .question {display: none}. Добавьте активный класс к первому вопросу (т.е. .active {display: block}, он показывает первый вопрос. Посмотрите на все divs с классом вопросов и добавьте их в переменную, при нажатии каждой следующей кнопки удалите активный класс из текущего вопроса add active . класс к следующему DIV с классом вопросом, используя classList.add и classList.remove в Javascript, пока последний вопрос не будет достигнут граф сохраняет номер текущего вопроса в я сделал это в codepen http://codepen.io/dwanirdesh/pen/EaQOPg

или код непосредственно из ниже.:

<div id="q0" class="question active"> 
<li> 
<h3>1. The color of the sky is... </h3> 
<input type="radio" name="question0" value="A">Green<br> 
<input type="radio" name="question0" value="B">Blue<br> 
<input type="radio" name="question0" value="C">Red<br> 
<input type="radio" name="question0" value="D">Purple<br> 
</li> 
</div> 
<div id="q1" class="question" > 
<li> 
<h3>2. Paper comes from... </h3> 
<input type="radio" name="question1" value="A">Water<br> 
<input type="radio" name="question1" value="B">Cement<br> 
<input type="radio" name="question1" value="C">Trees<br> 
<input type="radio" name="question1" value="D">The Sky<br> 
</li> 
</div> 
<div id="q2" class="question"> 
<li> 
<h3>3. How many hours in a day? </h3> 
<input type="radio" name="question2" value="A">24<br> 
<input type="radio" name="question2" value="B">22<br> 
<input type="radio" name="question2" value="C">16<br> 
<input type="radio" name="question2" value="D">48<br> 
</li> 
</div> 

<button onclick="next()">Next Question</button> 

## CSS ## 
.question{ 
    display:none 
} 

.active{ 
    display:block 
} 

## JAVASCRIPT ## 

var questionNumber=0; 
var questions=document.querySelectorAll('.question'); 
     function next(){ 
      questionNumber++; 
      if(questions.length>questionNumber) 
      { 
       document.querySelector('.active').classList.remove('active'); 
       questions[questionNumber].classList.add('active'); 
      } 
     }