getElementById().style.display does not work

Question

I made some js code for <div> to appear or disappear.

[src.js]

openSearch = () => {
    var con = document.getElementById("search-bar");
    if(con.style.display == 'none') {
        con.style.display = 'block';
    } else {
        con.style.display = 'none';
    }
}

[style.css]

#search-bar {
    position: absolute;
    height: 4em;
    width: 20em;
    background-color: white;
    border: 1px solid black;
    padding: 1.5rem;
    right: 0;
    display: none;
}

and add onclick="openSearch()" to <a> tag.

When I click the <a> tag first time, it doesn't work anything.

But click again, it works properly.

So I tried to console.log(document.getElementById("search-bar").style.display, it throws ""(blank).

I wonder that I defined display: none to search-bar but why initial style.display of search-bar is blank value?

And how can I fix it?

you forgot to add the html part, but my guess is that there is no style `display:none` on that div. When you check for `con.style.display` it is empty the first time. `div.style` is not the computed style, but the value of the attribute `style` on the div. — dube, May 22 '18 at 06:00
The `.style` property only contains styles set directly on the element. To include those applied by a stylesheet, [you can use `getComputedStyle()`](https://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript). — Jonathan Lonowski, May 22 '18 at 06:01

score 3 · Accepted Answer · answered May 22 '18 at 06:04

3

Alternatively, you can move the display style to another class and can toggle class.

openSearch = () => {
    var con = document.getElementById("search-bar");
    con.classList.toggle("hidden");
}

#search-bar {
    position: absolute;
    height: 4em;
    width: 20em;
    background-color: white;
    border: 1px solid black;
    padding: 1.5rem;
    right: 0;
}

.hidden {
  display: none;
}

    <a onclick="openSearch()">Toggle</a>
    <div id="search-bar" class="hidden">Some text here</div>

answered May 22 '18 at 06:04

Nikhil Aggarwal

28,197
4
43
59

I solved issue for add style attribute directly to a tag, but thanks for reply! – Hide May 22 '18 at 06:06
1

@Hide - Good to hear that, however, i would suggest to avoid inline styles as much as you can. – Nikhil Aggarwal May 22 '18 at 06:08

score 1 · Answer 2 · answered May 22 '18 at 05:57

1

function openSearch()
 {
       var div = document.getElementById("search-bar");
       if (div.style.display !== "none") {
          div.style.display = "none";
        }
      else {
         div.style.display = "block";
       }
 }

answered May 22 '18 at 05:57

Vishal Lunagariya

40
8

1

while the answer is correct, it does not explain what was wrong – dube May 22 '18 at 05:59

score 0 · Answer 3 · answered May 22 '18 at 05:57

0

You could try initializing the style via js to none:

document.getElementById("search-bar").style.display = 'none';

When the page loads. My guess is that'll work.

answered May 22 '18 at 05:57

Justin

77
1
9

score 0 · Answer 4 · answered May 22 '18 at 06:05

0

[SOLVED]

First I add display: none to css file.

But after style="display: none" to a tag, it works properly.

Maybe I think there is loading priority, But I don't know why exactly.

answered May 22 '18 at 06:05

Hide

3,199
7
41
83

When you add the style attribute to the element, it takes higher precedence to the style defined in your stylesheet. Hence, it overrides the display style. – Nikhil Aggarwal May 22 '18 at 06:07
@NikhilAggarwal I got it. So, My payload is a normal solution? – Hide May 22 '18 at 06:08
Yes it is. However, as mentioned in a comment on another answer, try to avoid inline styles. – Nikhil Aggarwal May 22 '18 at 06:10

score 0 · Answer 5 · answered May 22 '18 at 06:17

when you set the display:none in css it innisial like display="". and not display=none. the result is the same, but if you check display='none' he will return false.. you can try it like this:

openSearch = () => {
    var con = document.getElementById("search-bar");
    if(con.style.display == '') {
        con.style.display = 'block';
    } else {
        con.style.display = '';
    }
}

and it will work fine

Ehsan · Answer 6 · 2018-05-22T06:31:31.463

Use this line code:

if(con.style.display == 'none' || con.style.display == '') {

openSearch = () => {
    var con = document.getElementById("search-bar");
    if(con.style.display == 'none' || con.style.display == '') {
        con.style.display = 'block';
    } else {
        con.style.display = 'none';
    }
}

#search-bar {
  position: absolute;
  height: 4em;
  width: 20em;
  background-color: white;
  border: 1px solid black;
  padding: 1.5rem;
  right: 0;
  display: none;
}

<div id="search-bar">My Div</div>
<a onclick="openSearch()" href="#">Click</a>

getElementById().style.display does not work

6 Answers6

Linked