How to show a display:none DIV using Javascript

Question

I have a DIV which has a display set to none, by using javascript I tried showing it by using the onclick of a button. But what happens is the exact opposite. My DIV is already shown and when I click the button it hides the DIV. What am i doing wrong here, please HELP!

This is my button and the div:

<button onclick="myFunction()">SHOW</button>
    <div id="how_to_form">
      <img src="../images/view.png">
    </div>

This is the JS code:

function myFunction() {
     var x = document.getElementById("how_to_form").style.display = 'none';
     if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

You are assigning x to the result of = 'none'. At that point, x is the string 'none' and has no style property — Phil
– Phil, Commented Apr 1, 2019 at 1:08
Yes I assigned it using .style.display. Is that the wrong way of assigning its display settings? — Justin Saints
– Justin Saints, Commented Apr 1, 2019 at 1:12
Change variable x value to var x= document.getElementById("how_to_form") — Naga Sai A
– Naga Sai A, Commented Apr 1, 2019 at 1:12

CertainPerformance · Accepted Answer · 2019-04-01 01:10:07Z

2

Your line there has a double assignment:

var x = document.getElementById("how_to_form").style.display = 'none';

It first assigns the display to none:

document.getElementById("how_to_form").style.display = 'none';

and then takes the result of that expression (which is the string you assigned), and assigns it to x:

var x = 'none';

Which isn't what you want. First declare the variable for the element, then assign its style.

Also, it sounds like you want the element to start out hidden - assign its initial style outside the function:

const form = document.getElementById("how_to_form");
form.style.display = 'none';
function myFunction() {
  if (form.style.display === "none") {
    form.style.display = "block";
  } else {
    form.style.display = "none";
  }
}

Or, to be more concise, use the conditional operator:

function myFunction() {
  form.style.display = form.style.display === "none"
  ? 'block'
  : 'none';
}

Also consider attaching the handler properly using Javascript, rather than using inline HTML attributes, which are generally considered to be pretty poor practice and can be hard to manage:

document.querySelector('button').addEventListener('click', myFunction);

answered Apr 1, 2019 at 1:10

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

8 Comments

Justin Saints Over a year ago

About this handler property, Is that an alternate way in creating a button?

CertainPerformance Over a year ago

That's the alternate (better) way to attach the handler, rather than using an inline HTML attribute.

Justin Saints Over a year ago

But wouldn't it be harder to style the button? If I am styling it using CSS?

CertainPerformance Over a year ago

Not at all - all you have to do is remove the onclick="myFunction()" and use the line document.querySelector('button').addEventListener('click', myFunction); instead, you don't need to make any other changes.

Justin Saints Over a year ago

Did you mean like this? <button type="submit" document.querySelector('button').addEventListener('click', myFunction());

|

pokken · Accepted Answer · 2019-04-01 01:09:47Z

1

have you checked if you have already set a default style to your div? you either have to set your div's default style to display:none by inline

<div id="how_to_form" style="display:none">

or by css

<style>
    #how_to_form{ display:none }
</style>

answered Apr 1, 2019 at 1:09

pokken

3573 silver badges15 bronze badges

1 Comment

Justin Saints Over a year ago

Oh thanks @pokken! This works! Did not thought css would do the thing. But can I ask what is wrong with my display = 'none' in my javascript code?

Naga Sai A · Accepted Answer · 2019-04-01 01:27:38Z

1

Issue is your variable assignment

Chaining the assignment operator is possible in order to assign a single value to multiple variables.

Please refer this link for variable assignment options https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators

var x = y= 10

Then both x and y values are 10

Similarly in your code var x is none

To achieve expected result , use below option
1. set CSS for html_to_form to display:none 2.In your code change variable x assignment to var x = document.getElementById("html_to_form")

edited Apr 1, 2019 at 1:27

answered Apr 1, 2019 at 1:22

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to show a display:none DIV using Javascript

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related