Hide one div and show another by clicking on a javascript-only button

Asked

Viewed 744 times

0

I’m trying to make a quiz and I want it to appear one question at a time. I used the css property display: none; to hide, and created a javascript function that takes as parameter the id of the div that has to be shown. By clicking on button Start is shown the first question. Then I call the function again by clicking on button Submit to show next question, but it does not appear.

Ps: I want to use javascript only

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

2 answers

1

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

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

hiding the other Ivs:

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

}

  • And as I do to hide the previous div?

  • vc only need to hide all other Ivs with the question_form class before displaying question. I updated the answer.

1


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

As the first button is not in any form, it does not do this, unlike the others.

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 will give an example and how would be below, for you to 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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.