CODEWITHSUNDEEP
javascripthtml
Casey Tuna Bloodworth
Casey Tuna Bloodworth

Reputation: 35

Creating buttons that display buttons

I am trying to make an online questionnaire that will only show the next question after answering the current question. I am very new at this and trying to learn as I go. How do I make the 2nd set of buttons appear only when you answer yes to question 1?

<html>
Question 1
<p>

<button onclick="myFunction1()">Yes</button>
<script>
function myFunction1() {
    document.getElementById("demo").innerHTML = "Yes on question 1, display question 2";document.getElementById("demo").style.color = "black";}

</script>

<button onclick="myFunction2()">No</button>





<script>
function myFunction2() { document.getElementById("demo").innerHTML ="No on question 1 negative answer to question 1 display negative response";document.getElementById("demo").style.color = "red";}
</script>
</html>
<p id="demo"></p>


</script>

</p></p></p>

</html>

<head>
    <script>
        function showImg() {
            document.getElementById("map_img").style.display = "";
        }
    </script>
</head>
<body>
   <button onclick="myFunction3()">Yes</button> 




<script>
function myFunction3() {  document.getElementById("demo2").innerHTML = "Yes to question 2";}</script>
</html>


<button onclick="myFunction4()">No</button> 
<script>
function myFunction4() {
    document.getElementById("demo2").innerHTML = "No to question 2";}
</script>


</body>

<p id="demo2"></p>

Upvotes: 1

Views: 87

Answers (4)

technico
technico

Reputation: 1172

As other I would have said : If you want to get the results at the end of all the questions. (if user leave, you won't get nothing.)

A solution would be to put each question in hidden divs, on the same page, displaying them after each validation. This way you won't need to put and remove content. Example:

function showquestion(number){
$("#question"+number).removeClass("hidden"); // Show the next question
$("#question"+(number-1)).addClass("hidden"); // Hide the current question
}
.hidden{display:none;
visibility : hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question1" class=""> Mauvaise réponse</div>
<div id="question1" class=""> Question 1 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(2)">No</button></div>
<div id="question2" class="hidden"> Question 2 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(3)">no</button></div>
<div id="question3" class="hidden"> Question 3 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(4)">no</button></div>

But we forgot the "yes / no" part, nor talk about the visibility of the question solution inside the source code.

The correct way of doing this would be an ajax call on each question validation : The user send the response to a php script, this script validate the response, or not, then send the content that will be inserted on the user page. It's the only way for the user don't cheat, and it allow you to save his response on each step (if you save something).

Upvotes: 0

Luis Antonio Pestana
Luis Antonio Pestana

Reputation: 1009

In my opinion, you have to put your second, third and ... questions into div's tags with style="display:none"

When the users click on the Yes button, you can easily change the display to block and show the next question.

Another thing is that your html is not formatted well.

Here is an example of html.

<html>
   <head>
   </head>
   <body>
     <div>Your first question</div>
     <div style="display:none" id="question2">Your second question</div>

     <script>
       You can put all your functions here
     </script>
   </body>
</html>

I did a very simple example for you, you can check on the following link:

https://jsfiddle.net/L7gp4c5g/

Hope to help you!

Upvotes: 0

Usir
Usir

Reputation: 21

Put the what you want to hide in a div hidden:

<div id="question2" style="visibility: hidden">
    <button onclick="onClick(2)">Yes</button> 
    <button onclick="onClick(2)">no</button> 
</div>

Use javascript to programmatically hide or show next div:

<script>
    function onClick(button) {
        document.getElementById('question' + (button + 1)).style.visibility = "visible"
    }
</script>

Upvotes: 0

Doua Beri
Doua Beri

Reputation: 10949

Use css display: none; to hide the second question, then when the user clicks the yes button, you change it to display:block; Here is an example: https://jsfiddle.net/mrpbtbgy/2/

document.querySelector("#q1Btn").addEventListener("click",()=>{
    document.querySelector("#question2").style.display="block";
});

Upvotes: 1

Related Questions