如何将 Div 显示 CSS 从无更改为阻止按钮单击

Question

I am trying to make some quiz lander. And I want to change div cs from display: None to Display: block on click of a button.

I am trying it using JS but I am not able to.

example: I have questions and two buttons per question (Yes and No) So if you click on any button (either yes or no), then Div 2 must change its CSS from display: none to display: Block and So On For other questions.

Hope You Are Getting it.

Here is the link to tet post I am trying to do

https://us.healthshul.com/test-post/

Guys need some help.

Answer 1

lets say you have this button and text:

<div id="foo">hello world!</div>
<button id="switch" />Click me</button>

use this code to change the css:

$('#switch').click(function() {
    $('#foo').css({
        'display': 'Block'
    });
});

this way when you click switch the style display will change from None to Block

Answer 2

Load all your questions at once. Position them in the same place and use position:absolute to allow them to overlap. Give them ID values that increase by 1 each question.

The JavaScript I've written sets a variable that corresponds with the question numbers (which are also the question IDs). The function executes when the user clicks an answer. It retrieves the current question's ID, sets its display to none (revealing the next question), then adds one to the ID variable's value.

Here is the code:

 var num = 1; function display() { document.getElementById(num).style.display = "none"; num += 1; }

 .button { padding: 10px 20px; border: 1px solid black; }.button:hover { cursor: pointer; }.question { width: 250px; height: 100px; background-color: gray; display: block; position: absolute; }

 <div class="question" id="4"> <span class="text">Question4 Question4 Question4 Question4 Question4 Question4</span> <button class="button" onClick="display();">Answer 1</button> <button class="button" onClick="display();">Answer 2</button> </div> <div class="question" id="3"> <span class="text">Question3 Question3 Question3 Question3 Question3 Question3</span> <button class="button" onClick="display();">Answer 1</button> <button class="button" onClick="display();">Answer 2</button> </div> <div class="question" id="2"> <span class="text">Question2 Question2 Question2 Question2 Question2 Question2</span> <button class="button" onClick="display();">Answer 1</button> <button class="button" onClick="display();">Answer 2</button> </div> <div class="question" id="1"> <span class="text">Question Question Question Question Question Question Question</span> <button class="button" onClick="display();">Answer 1</button> <button class="button" onClick="display();">Answer 2</button> </div>