Hide a div and show another when clicking a button using javascript only

Question

Hide a div and show another when clicking a button using javascript only

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I'm trying to do a quiz and I want one question to appear at a time. I used the css property display: none; to hide, and created a function in javascript that receives as a parameter the id of the div that has to be shown. Clicking% w /% of Start will show the first question. Then I call the function again by clicking button Submit to show the next question, but it does not appear.

Ps: I just want to use javascript

function show_question (n) {
	//Esconde o button start
	document.getElementById('start').style.display = 'none';
	//Mostrar a pergunta
	document.getElementById(n).style.display = 'inline'; 

}

.question_form {
	display: none;
}

 <main>
<button id="start" onclick="show_question('q1')">Start</button>
<div class="question_form" id="q1">
	<form id="question1">
		<h3>1. Which tag should used to represent the "header" of a document?</h3>
		<ul>
			<li><input type="radio" name="q1" value="a">head</li>
			<li><input type="radio" name="q1" value="b">header</li>
			<li><input type="radio" name="q1" value="c">heading</li>
			<li><input type="radio" name="q1" value="d">main</li>
		</ul>		
		<button type="submit" id="btn-salvar" onclick="show_question('q2')">Submit</button>
	</form>
</div>

<div class="question_form" id="q2">
	<form id="quetion2">
		<h3>2. Which the following is a NOT feature of HTML?<h3>
			<ul>
				<li><input type="radio" name="q2" value="a">New Media Elements</li>
				<li><input type="radio" name="q2" value="b">Form Input Types</li>
				<li><input type="radio" name="q2" value="c">Local Storage</li>
				<li><input type="radio" name="q2" value="d">Cookies</li>
			</ul>		
			<button id="submit" onclick="show_question('q3')">Submit</button>
	</form>
</div>

<div class="question_form" id="q3">
	<form id="question3">
		<h3>3. Which element is the most appropriate to wrap around each blog post on a page?</h3>
			<ul>
				<li><input type="radio" name="q3" value="a">section</li>
				<li><input type="radio" name="q3" value="b">post</li>
				<li><input type="radio" name="q3" value="c">article</li>
				<li><input type="radio" name="q3" value="d">main</li>
			</ul>
			<button id="submit">Submit</button>
	</form>
</div>

javascript

asked by anonymous 13.07.2017 / 19:11

2 answers

1

The problem is that the form is being sent, hence the screen is updating. You just need to put a "preventDefault ()" or "return false" in the function call.

onclick="show_question('q2'); return false;"

hiding other divs:

function show_question (n) {
    var ele = document.getElementsByClassName('question_form');
        for (var i = 0; i < ele.length; i++ ) {
           ele[i].style.display = "none";
        }

    //Esconde o button start
    document.getElementById('start').style.display = 'none';
    //Mostrar a pergunta
    document.getElementById(n).style.display = 'inline'; 

}

13.07.2017 / 19:20

How to read yaml with php Nano for Windows

score 1 · Accepted Answer

As the buttons are inside a form, when executing the action of the onClick event your page will be reloaded, so the feeling that the show_question function is not working.

As the first button is not on any form, it does not do this, unlike the other ones.

To solve this problem, just do what was mentioned by @FrancinaldoPortela and leave your events like this:

onclick = "show_question( 'qID' ) ; return false ;"

Anyway, to run your program, just have a single button, I'll give an example and how it would be below, so you have an idea and develop on top of it.

<html>
    <style>
    .question_form {
        display: none;
    }
    </style>
    <script>
        var count = 0;

        function show_question () {
            if(count === 0) {
                document.getElementById('q' + ++count).style.display = 'block'; 
                document.getElementById('sendButton').innerText = 'Submit';
            } else {
                document.getElementById('q' + count).style.display = 'none'; 
                document.getElementById('q' + ++count).style.display = 'block'; 

                if(document.getElementById('q' + (count+1)) === null) {
                    // AQUI VOCÊ FAZ ALGUMA COISA QUANDO ACABAREM AS PERGUNTAS

                    document.getElementById('q' + count).style.display = 'none'; 
                    document.getElementById('sendButton').innerText = 'Start';
                    count = 0;
                }
            }
        }

    </script>
<main>

    <div class="question_form" id="q1">
        <form id="question1">
            <h3>1. Which tag should used to represent the "header" of a document?</h3>
            <ul>
                <li><input type="radio" name="q1" value="a">head</li>
                <li><input type="radio" name="q1" value="b">header</li>
                <li><input type="radio" name="q1" value="c">heading</li>
                <li><input type="radio" name="q1" value="d">main</li>
            </ul>       
        </form>
    </div>

    <div class="question_form" id="q2">
        <form id="quetion2">
      <h3>2. Which the following is a NOT feature of HTML?</h3>
                <ul>
                    <li><input type="radio" name="q2" value="a">New Media Elements</li>
                    <li><input type="radio" name="q2" value="b">Form Input Types</li>
                    <li><input type="radio" name="q2" value="c">Local Storage</li>
                    <li><input type="radio" name="q2" value="d">Cookies</li>
                </ul>       
        </form>
    </div>

    <div class="question_form" id="q3">
        <form id="question3">
            <h3>3. Which element is the most appropriate to wrap around each blog post on a page?</h3>
                <ul>
                    <li><input type="radio" name="q3" value="a">section</li>
                    <li><input type="radio" name="q3" value="b">post</li>
                    <li><input type="radio" name="q3" value="c">article</li>
                    <li><input type="radio" name="q3" value="d">main</li>
                </ul>
        </form>
    </div>
    <button id="sendButton" onclick="show_question();">Start</button>
</main>