how to make a hidden div appear on button click in Javascript

Question

I am new to JavaScript, I am trying to make a div appear after the click of a button, i've tried but i don't seem to be getting it right. Below is my JS CODE:

let hiddenArea = document.getElementById('hidden-div');


submitButton.addEventListener('click', function() {
    if(document.getElementById('r1').checked) {
        hiddenArea.style.display = "block";
        arena.style.display='none';
        actionArea.style.display ='none';

    }
    else{
        arena.style.visibility='visible';
        actionArea.style.visibility ='visible';   
        hiddenArea.style.display = "none";
    }
});

Here is my HTML code:

<p>Do you want to lock? </p>
    <form>
        <input id="r1" type="radio" name="question" value="yes" checked> Yes<br>
        <input id="r2" type="radio" name="question" value="no"> No<br>
        <input id="btn" type="submit" value="Submit">
    </form><br><br>
</div>
<div id ="hidden-div"></div>

if you are ok with jquery, then it will make your work more easy. — Devsi Odedra
– Devsi Odedra, Commented Dec 19, 2018 at 12:31
The code you've provided is incomplete. You are using undeclared variable names and invalid HTML. Please fix this — Nick Parsons
– Nick Parsons, Commented Dec 19, 2018 at 12:34
As the submitButton is inside the FORM element, the form must be getting submitted as a result page must be reloading — Satpal
– Satpal, Commented Dec 19, 2018 at 12:35

Sumesh TG · Accepted Answer · 2018-12-19 12:35:27Z

3

let hiddenArea = document.getElementById('hidden-div');
let submitButton = document.getElementById('btn');

submitButton.addEventListener('click', function(e) {
e.preventDefault();
    if(document.getElementById('r1').checked) {
        hiddenArea.style.display = "block";
     //   arena.style.display='none';
      //  actionArea.style.display ='none';

    }
    else{
     //   arena.style.visibility='visible';
    //    actionArea.style.visibility ='visible';   
        hiddenArea.style.display = "none";
    }
});

enter code here 


<p>Do you want to lock? </p>
          <form>
            <input id="r1" type="radio" name="question" value="yes" checked> Yes<br>
            <input id="r2" type="radio" name="question" value="no"> No<br>
            <input id="btn" type="submit" value="Submit">
          </form><br><br>

      </div>
      <div id ="hidden-div">Hidden</div>

You should turn off the default behavior off button e.preventDefault();.

answered Dec 19, 2018 at 12:35

Sumesh TG

2,5732 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Moshood Gbadamosi Over a year ago

how do i do that? can you please explain, thank you. i'd tried commenting out like you did in your code, yet it did not work

Sumesh TG Over a year ago

No need to comment any code add an event parameter then e.preventDefault()

overflowingTask · Accepted Answer · 2018-12-19 12:47:03Z

1

An alternative would be:
$('#yourDivID').toggle();
If you want it to switch between show and hidden.

answered Dec 19, 2018 at 12:47

overflowingTask

316 bronze badges

Comments

Faraz Babakhel · Accepted Answer · 2018-12-19 12:34:55Z

0

Try this i hope this will work for you

var element=document.getElementById('target');
element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

in JQuery the following code will work for you.

$('#youDivID').hide();
$('#youDivID').show();

$('.youDivClassName').hide();
$('.youDivClassName').show();

answered Dec 19, 2018 at 12:34

Faraz Babakhel

6645 silver badges17 bronze badges

Comments

Moshood Gbadamosi · Accepted Answer · 2018-12-23 13:08:46Z

Thanks to everyone that contributed, finally, I was able to solve the visibility problem I had in my code with the help of dev tool, I was able to see through dev tool that div in question was answerable to (1).display ="none", and (2) .visibility="visible" when the button was clicked, so . display property was taking precedence over .visibility.

I was able to correct this by chosen one of the props. See my JS code below:

hiddenArea.style.visibility = "hidden";



submitButton.addEventListener('click', function(e) {
    e.preventDefault();
        if(document.getElementById('r1').checked) {
            hiddenArea.style.visibility = "visible";
            arena.style.display='none';
            actionArea.style.display ='none';


        }
        else {
            arena.style.visibility='visible';
            actionArea.style.visibility ='visible';   
            hiddenArea.style.display = "none";

Collectives™ on Stack Overflow

how to make a hidden div appear on button click in Javascript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related