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

Question

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.

Answer 1

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 2

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!