JavaScript - How to show the next div and hide the previous one?

I am creating a simple quiz and would like to know how to show one question at a time but only using JavaScript. I do not know jQuery. Essentially, I would like the first question to be shown automatically.

Here is an example of what my HTML looks like:

<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>

I currently don't have script for showing next div and hiding the previous one because I don't know how to even start.

I'm looking to have it put into this form...

function nextQ(){
  // code
}

... and for it to be called by this button:

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

I am really new to HTML and JavaScript and would appreciate any help.

Thanks.

Answers:

Answer

Pure JavaScript version (config):

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>


Pure JavaScript version (no config):

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 version:

$(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

Though I agree with @Bitwise on using jQuery instead on javascript alone to ensure cross-browser compatibility. But since you insist on using javascript, here's what you should do.

1) Ensure that your <li>'s are enclosed in a container tag first (say, <ul>) so you iterate only through desired list.

2) use display:none property instead of visibility:hidden. visibility:hidden simply hides an element, but it will still take up the same space as before. display:none hides an element, and it will not take up any space.

Here's the updated code.

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;
        }
    }

});

Here's the fiddle.

Cheers!

Answer

I would twist the code a little. Add question class to every div which acts as question i.e .question { display:none }. Add active class to first question (i.e. .active{display:block}, it shows the first question. Look for all divs with question class and add them to a variable, with every next button pressed,remove active class from current question add active class to next div with class question using classList.add and classList.remove of Javascript until last question is reached. Count keeps the current question's number. I've done it in the codepen http://codepen.io/dwanirdesh/pen/EaQOPg

Or code directly from below:

<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');
          }
        }
Answer

Here is the java script function code. For this to work, you need to make sure that the div display property to be set as or in the html code. Also you need to name the id of the button to be "next" so that it can be hidden on reaching the last button.

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 code here.

<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

Is it what you need?

  <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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.