Button click works on second click only

Question

I have a button and a div under it, the button must show this div onclick, i wrote the function and everything is fine, but it works only on second click and i can\'t figure

Answer 1

The problem with your code is that x.style.display corresponds with the display property attached inline to your element. It ignores your CSS selector, which means that x.style.display === 'none' is false the first time you run your function.

Inlining display:none would fix your problem :

<div id="myDiv">...</div>      → → →      <div id="myDiv" style="display:none;">...</div>

However, that's not the recommended approach here. A better way to achieve the desired result, would be to toggle a class :

document.getElementById('myButton').addEventListener('click', function() {
    document.getElementById("myDiv").classList.toggle('hidden');
});

.hidden {
  display: none;
}

<button id="myButton" type="button" class="btn btn-default">Show div</button>
<div id="myDiv" class="hidden">test test test test test test</div>

Answer 2

Because div doesn't have display in style. You can add it manually:

function showDiv() {
    var x = document.getElementById('myDiv');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

#myDiv{
display: none;
}

<button type="button" class="btn btn-default" onclick="showDiv()">Show div</button>

<div id="myDiv" style='display:none'>
test
test
test
test 
test
test 
</div>

Answer 3

Setting CSS style does not pervade to x.style.display so when you click the first time x.style.display actually equals "", so it hits your else block and sets the style.display to none, 2nd time and it hits the first branch of the conditional and shows your div.

Either use computedStyle to grab the actual style, or, this would be a little easier using classes.

JS:

function show () { var x = document.querySelector('#myDiv') x.classList.toggle('show') }

CSS:

.show { display: 'block'; }

Classlist is supported for all modern browsers but some really old ones will struggle with it, although good polyfills exist.

Answer 4

To get the value that you apply via a stylesheet (or block) you need to use getComputedStyle(). document.getElementById('myDiv').style.display can only read inline styles.

function showDiv() {
    var x = document.getElementById('myDiv');
    if ( window.getComputedStyle(x, null).getPropertyValue("display") === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

#myDiv{
display: none;
}

<button type="button" class="btn btn-default" onclick="showDiv()">Show div</button>

<div id="myDiv">
test
test
test
test 
test
test 
</div>

Answer 5

You have set the style in css.So the value of x.style.display is not none initially.it wolud be empty.So set that style initially. or use getComputedStyle to get the CSS rule

function showDiv() {
    var x = document.getElementById('myDiv');
 
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

#myDiv{
  display: none;
}

<button type="button" class="btn btn-default" onclick="showDiv()">Show div</button>

<div id="myDiv" style="display:none;">
test
test
test
test 
test
test 
</div>

if the element's display is being inherited or being specified by a CSS rule, compute the style using getComputedStyle

function showDiv() {
        var x = document.getElementById('myDiv');
   
      
        if (getComputedStyle(x, null).display === 'none') {
            x.style.display = 'block';
        } else {
            x.style.display = 'none';
        }
    }

#myDiv{
      display: none;
    }

<button type="button" class="btn btn-default" onclick="showDiv()">Show div</button>

    <div id="myDiv">
    test
    test
    test
    test 
    test
    test 
    </div>