Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

Javascript - How To Show The Next Div And Hide The Previous One?

Post a Comment
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

Solution 1:

Pure JavaScript version (config):

var showing = [1, 0, 0];
var questions = ['q0', 'q1', 'q2'];
functionnext() {
    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;
        }
    }      
}
<divid="questions"><divid="q0"><h3>1. The color of the sky is... </h3><inputtype="radio"name="question0"value="A">Green<br><inputtype="radio"name="question0"value="B">Blue<br><inputtype="radio"name="question0"value="C">Red<br><inputtype="radio"name="question0"value="D">Purple<br></div><divid="q1"style="display: none"><h3>2. Paper comes from... </h3><inputtype="radio"name="question1"value="A">Water<br><inputtype="radio"name="question1"value="B">Cement<br><inputtype="radio"name="question1"value="C">Trees<br><inputtype="radio"name="question1"value="D">The Sky<br></div><divid="q2"style="display: none"><h3>3. How many hours in a day? </h3><inputtype="radio"name="question2"value="A">24<br><inputtype="radio"name="question2"value="B">22<br><inputtype="radio"name="question2"value="C">16<br><inputtype="radio"name="question2"value="D">48<br></div></div><buttononclick="next()">Next Question</button>

Pure JavaScript version (no config):

functionnext() {
    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;
        }
    }      
}
<divid="questions"><divid="q0"><h3>1. The color of the sky is... </h3><inputtype="radio"name="question0"value="A">Green<br><inputtype="radio"name="question0"value="B">Blue<br><inputtype="radio"name="question0"value="C">Red<br><inputtype="radio"name="question0"value="D">Purple<br></div><divid="q1"style="display: none;"><h3>2. Paper comes from... </h3><inputtype="radio"name="question1"value="A">Water<br><inputtype="radio"name="question1"value="B">Cement<br><inputtype="radio"name="question1"value="C">Trees<br><inputtype="radio"name="question1"value="D">The Sky<br></div><divid="q2"style="display: none;"><h3>3. How many hours in a day? </h3><inputtype="radio"name="question2"value="A">24<br><inputtype="radio"name="question2"value="B">22<br><inputtype="radio"name="question2"value="C">16<br><inputtype="radio"name="question2"value="D">48<br></div></div><buttononclick="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();
                }
                returnfalse;
            }
        });
    });
});
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="questions"><divid="q0"><h3>1. The color of the sky is... </h3><inputtype="radio"name="question0"value="A">Green<br><inputtype="radio"name="question0"value="B">Blue<br><inputtype="radio"name="question0"value="C">Red<br><inputtype="radio"name="question0"value="D">Purple<br></div><divid="q1"style="display: none"><h3>2. Paper comes from... </h3><inputtype="radio"name="question1"value="A">Water<br><inputtype="radio"name="question1"value="B">Cement<br><inputtype="radio"name="question1"value="C">Trees<br><inputtype="radio"name="question1"value="D">The Sky<br></div><divid="q2"style="display: none"><h3>3. How many hours in a day? </h3><inputtype="radio"name="question2"value="A">24<br><inputtype="radio"name="question2"value="B">22<br><inputtype="radio"name="question2"value="C">16<br><inputtype="radio"name="question2"value="D">48<br></div></div><buttonclass="next">Next Question</button>

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

<ulid="listContainer"><divid="q0"><listyle="display:list-item"><h3>1. The color of the sky is... </h3><inputtype="radio"name="question0"value="A"/>Green<br/><inputtype="radio"name="question0"value="B"/>Blue<br/><inputtype="radio"name="question0"value="C"/>Red<br/><inputtype="radio"name="question0"value="D"/>Purple<br/></li></div><divid="q1"  ><listyle="display:none"><h3>2. Paper comes from... </h3><inputtype="radio"name="question1"value="A"/>Water<br/><inputtype="radio"name="question1"value="B"/>Cement<br/><inputtype="radio"name="question1"value="C"/>Trees<br/><inputtype="radio"name="question1"value="D"/>The Sky<br/></li></div><divid="q2" ><listyle="display:none"><h3>3. How many hours in a day? </h3><inputtype="radio"name="question2"value="A"/>24<br/><inputtype="radio"name="question2"value="B"/>22<br/><inputtype="radio"name="question2"value="C"/>16<br/><inputtype="radio"name="question2"value="D"/>48<br/></li></div></ul><buttonid="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!

Solution 3:

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:

<divid="q0"class="question active"><li><h3>1. The color of the sky is... </h3><inputtype="radio"name="question0"value="A">Green<br><inputtype="radio"name="question0"value="B">Blue<br><inputtype="radio"name="question0"value="C">Red<br><inputtype="radio"name="question0"value="D">Purple<br></li></div><divid="q1"class="question" ><li><h3>2. Paper comes from... </h3><inputtype="radio"name="question1"value="A">Water<br><inputtype="radio"name="question1"value="B">Cement<br><inputtype="radio"name="question1"value="C">Trees<br><inputtype="radio"name="question1"value="D">The Sky<br></li></div><divid="q2"class="question"><li><h3>3. How many hours in a day? </h3><inputtype="radio"name="question2"value="A">24<br><inputtype="radio"name="question2"value="B">22<br><inputtype="radio"name="question2"value="C">16<br><inputtype="radio"name="question2"value="D">48<br></li></div><buttononclick="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');
          }
        }

Solution 4:

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.

functionnextQ(){
   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'; 
    }elseif ( 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. 

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

Solution 5:

Is it what you need?

<divid="q0"><li><h3>1. The color of the sky is... </h3><inputtype="radio"name="question0"value="A">Green<br><inputtype="radio"name="question0"value="B">Blue<br><inputtype="radio"name="question0"value="C">Red<br><inputtype="radio"name="question0"value="D">Purple<br></li><buttonclass="next"onclick="goNext(0)">Next Question</button></div><divid="q1"style="display:none"><li><h3>2. Paper comes from... </h3><inputtype="radio"name="question1"value="A">Water<br><inputtype="radio"name="question1"value="B">Cement<br><inputtype="radio"name="question1"value="C">Trees<br><inputtype="radio"name="question1"value="D">The Sky<br></li><buttonclass="next"onclick="goNext(1)">Next Question</button></div><divid="q2"style="display:none"><li><h3>3. How many hours in a day? </h3><inputtype="radio"name="question2"value="A">24<br><inputtype="radio"name="question2"value="B">22<br><inputtype="radio"name="question2"value="C">16<br><inputtype="radio"name="question2"value="D">48<br></li><buttonclass="next"onclick="goNext(2)">Next Question</button></div><scriptlanguage=javascript>functiongoNext(i)
      {
          document.getElementById("q"+i).style.display = 'none'; 
          i++;
          document.getElementById("q"+i).style.display = 'block'; 
      }
  </script>

Post a Comment for "Javascript - How To Show The Next Div And Hide The Previous One?"