My display style.display test fail when using == or === but suceed when using only =

Question

There is something I can't understand. I have a basic function with 2 buttons, when clicking the first it should hide the other one & reveal it if it was previously hidden.

I use a style.display test but unless I use only "=" in my test, it fails. I don't get why. Any hint please?

Here is the code with a "mistake" that works:

function reduce() { 
if (document.getElementById("B5").style.display = "block")
{
document.getElementById("B5").style.display = "none";
}
}

<button id="B1" onclick="reduce()">Button 1</button>
<button id="B5" >Button 2 (to hide)</button>

Here is the one that should work but does not:

function reduce() { 
if (document.getElementById("B5").style.display == "block")
{
document.getElementById("B5").style.display = "none";
}
}

<button id="B1" onclick="reduce()">Button 1</button>
<button id="B5" >Button 2 (to hide)</button>

Where do I get it wrong? Thanks

`=` is assignment. You assign the right hand value to the left hand property. `==` is value comparison, `===` is value & type comparison. For eg `1 == '1'` will return true whereas `1 === '1'` will return false — Mihai T, Dec 03 '20 at 10:14
The first one "works" basically because the if condition is always true. See [Get a CSS value with JavaScript](https://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript) — Guy Incognito, Dec 03 '20 at 10:16
Ok thanks, and can you tell what's wrong with second piece of code? Why does style.display == "block" fail? — Naga, Dec 03 '20 at 10:19

score 2 · Accepted Answer · answered Dec 03 '20 at 10:22

You can not get the style by xxx.style of an element if the style is not defined inline, so document.getElementById("B5").style.display is always going to be "" by default.

Solution: use window.getComputedStyle(document.getElementById("B5")) instead

The default display of button is inline-block, not block. So display === "block" will never work.

Solution: use display !== "none" instead

Here's an example of how it should be done:

function reduce() { 
  if (window.getComputedStyle(document.getElementById("B5")).display !== "none") {
    document.getElementById("B5").style.display = "none";
  } else {
    // restore the style of B5 to its original state
    document.getElementById("B5").style.display = "";
  }
}

<button id="B1" onclick="reduce()">Button 1</button>
<button id="B5" >Button 2 (to hide)</button>

great thanks ! I lacked the difference between inline style and computed style. Now I understand, Nice of you to help have a good day — Naga, Dec 03 '20 at 10:38

score 2 · Answer 2 · answered Dec 03 '20 at 10:24

= is assignment. You assign the right hand value to the left hand property. == is value comparison, === is value & type comparison. For eg 1 == '1' will return true whereas 1 === '1' will return false

In your first snippet you assign block to the button's display property. That is not a comparison so it will return true ( but it's wrong )

That being said, the button element doesn't have display:block set by default. It has display: inline-block. But that is a computed style ( attributed by the browser )

I suggest using a != 'none' comparison in the second snippet. Or get the computed style and compare it to inline-block or block

See below

function reduce() { 

const buttonB5 = document.getElementById("B5")
const buttonB5Display = window.getComputedStyle(buttonB5, null).getPropertyValue('display') // use this to get computed display style

if (buttonB5.style.display != 'none')
// or if (buttonB5Display == "inline-block" || buttonB5Display == 'block')
  {
    buttonB5.style.display = "none";
   }
}

<button id="B1" onclick="reduce()">Button 1</button>
<button id="B5" >Button 2 (to hide)</button>

I got it now, thanks a lot for your help ! – Naga Dec 03 '20 at 10:41 — Naga, Dec 03 '20 at 10:41

My display style.display test fail when using == or === but suceed when using only =

2 Answers2