JS function if/else to toggle display not working

Question

I want a button that toggles display none and block. It works the first time hiding the H1, but doesn't work the second time. I looked inside the console, and it's only toggling the first if statement.

<html>
    <head>
        <style>
            h1 {display: block;}
        </style>
    </head>
    <body>
        <h1 id="hello">hello there</h1>
        <button onclick="hide()">hide</button>
    </body>
    <script>
        var h1 = document.getElementById("hello")

        function hide() {
            if (h1.style.display ="block"){
                h1.style.display ="none"
                console.log ("display none")
            } else if (h1.style.display ="none"){
                h1.style.display ="block"
                console.log ("display block")
            }
        }
    </script>
</html>

I have tried

if (h1.style.display == "none")

but it doesn't work at all then. Doesn't even toggle the first time.

Because of your code missing on if block if (h1.style.display ="block"){ you shoul use doubke equal == — Ferhat BAŞ
– Ferhat BAŞ, Commented Aug 2, 2020 at 18:02
I thought that as well, but having == or === doesn't toggle the display at all — Jung Su Kim
– Jung Su Kim, Commented Aug 2, 2020 at 18:03
it doesn't matter you tried == or === , in your code if (h1.style.display = "block") is always true because it's an expression that returns non zero length string in this case "block". your first if block always is true by doing this if (h1.style.display = "block") — High
– High, Commented Aug 2, 2020 at 18:10
ANSWER: the reason it doesn't work is because you must initial style.display of h1 to block other wise none of if statements work: add this to your h1 tag style="display:block;" dont forget to replace = to == or === — High
– High, Commented Aug 2, 2020 at 18:18

Raz Buchnik · Accepted Answer · 2020-08-02 18:09:25Z

1

Notice that you assign instead of check:

if (h1.style.display ="block")

One = means to assign 'block' to the display property and the it will return true and therefore it always will set the display to false.

you should do this like this:

if (h1.style.display == "block")

And

} else if (h1.style.display == "none"){

You also can make your code more efficient by using some ES6 features:

h1.style.display = h1.style.display == 'block' ? 'none' : 'block'

The ? mark is a short if and the : is the short else.

So it basically says if the value is block, set it to none, else, set it to block.

Read more about Operators in JS and ES6.

edited Aug 2, 2020 at 18:09

answered Aug 2, 2020 at 18:03

Raz Buchnik

8,49917 gold badges64 silver badges117 bronze badges

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

1 Comment

Jung Su Kim Over a year ago

I tried this at first, but then it wouldn't toggle the display at all

Mister Jojo · Accepted Answer · 2020-08-02 18:20:40Z

0

toggle can be directly assumed on class assignation

see doc : https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

sample code:

const myHello      = document.getElementById('hello')
  ,   mybtShowHide = document.getElementById('bt-show-hide')


mybtShowHide.onclick =() =>
  {
  let status = myHello.classList.toggle('noDisplay')

  console.clear()  
  if (status) console.log ("display none")
  else       console.log ("display block")
  }

.noDisplay { display: none; }

<h1 id="hello">hello there</h1>
<button id="bt-show-hide"> show / hide</button>

answered Aug 2, 2020 at 18:20

Mister Jojo

23k6 gold badges28 silver badges45 bronze badges

Comments

jamesmallred · Accepted Answer · 2020-08-02 18:22:47Z

0

h1.style refers to the style attribute on the HTML tag. For more control, I would recommend using classList to determine if a hide class is on the element. I tested the following code and it works.

<html>
    <head>
        <style>
            .hide {display: none;}
        </style>
    </head>
    <body>
        <h1 id="hello">hello there</h1>
        <button onclick="hide()">hide</button>
    </body>
    <script>
        var h1 = document.getElementById("hello")

        function hide() {
            if (h1.classList.contains('hide')) {
                h1.classList.remove('hide');
            } else {
                h1.classList.add('hide');
            }
        }
    </script>
</html>

answered Aug 2, 2020 at 18:22

jamesmallred

2161 silver badge6 bronze badges

Comments

Jung Su Kim · Accepted Answer · 2020-08-02 18:34:04Z

0

The simplest answer that I found was this:

it doesn't matter you tried == or === , in your code if (h1.style.display = "block") is always true because it's an expression that returns non zero length string in this case "block". your first if block always is true by doing this if (h1.style.display = "block")

ANSWER: the reason it doesn't work is because you must initial style.display of h1 to block other wise none of if statements work: add this to your h1 tag style="display:block;" dont forget to replace = to == or === –

And so I made the code like this:

<html>
    <head>
        <style>
            h1 {}
        </style>
    </head>
    <body>
        <h1 id="hello">hello there</h1>
        <button onclick="hide()">hide</button>
    </body>
    <script>
        var h1 = document.getElementById("hello")

        h1.style.display = "block"

        function hide() {
            if (h1.style.display == "block"){
                h1.style.display = "none"
                console.log ("display none")
            } else if (h1.style.display == "none"){
                h1.style.display = "block"
                console.log ("display block")
            }
        }
    </script>
</html>

Not the cleanest, but it works

answered Aug 2, 2020 at 18:34

Jung Su Kim

12 bronze badges

2 Comments

Lzh Over a year ago

The assignment "expression" returns the value that has been assigned to the left side. E.g. if(myVar = 0) { console.log('it will not work'); } will not execute the if

Lzh Over a year ago

Even if you want to assign and check for the value at the same time, do not do this because it makes the code less readable. Instead do the assignment and the check the variable in the if

Lzh · Accepted Answer · 2020-08-02 18:36:23Z

0

You are using assignment = in the if and else if conditions. You should use == or === to check for equality. Also you don't account for the initial case where element.style.display be empty e.g. ""

But the real answer is: don't do this. Use a MVC, MVVM, MV* framework such as React, Angular, etc to hide/show things for you based on some model. These can handle much more complicated model and transform the UI in many other ways for you.

edited Aug 2, 2020 at 18:36

answered Aug 2, 2020 at 18:24

Lzh

3,6351 gold badge25 silver badges36 bronze badges

2 Comments

Jung Su Kim Over a year ago

lol I'm just starting out with javascript and messing around for now. I'll get to react eventually

Lzh Over a year ago

Alright, it is very good you have that on your mind. I think it is even better you make sure you know how the plain HTML/JavaScript work also before (or while) using those frameworks. Enjoy learning JS!

DJ BrU · Accepted Answer · 2020-08-02 18:57:23Z

0

<html>
    <head>
        
    </head>
    <body>
        <h1 id="hello">hello there</h1>
        <button onclick="hide()">hide</button>
    </body>
    <script>
        var h1 = document.getElementById("hello")

        function hide() {
            if (hello.hidden==true){
                hello.hidden=false;
        
            } 
            else{
                hello.hidden=true;
            }
        }
    </script>
</html>

answered Aug 2, 2020 at 18:57

DJ BrU

11 bronze badge

Comments

user3634977 · Accepted Answer · 2020-08-02 19:01:40Z

There is two things missing in above code .

To use equality operator than assignment operator for comparison: h1.style.display === "block"
a) To get actual element styling need to use DOM CSS . b) To access style property from DOM need to use inline styling .

Method a: using DOM CSS:

var h1 = document.getElementById("hello");
       
        function hide() {
        
        var h1Display = window.getComputedStyle(h1).display;
            if (h1Display === "block"){
                h1.style.display ="none";
            } else if (h1Display === "none"){
                h1.style.display ="block"
            }
        }

h1 {display: block;}

<html>
        <body>
            <h1 id="hello" >hello there</h1>
            <button onclick="hide()">hide</button>
        </body>
  </html>

Method b) using inline styling :

<html>
<h1 id="hello" style="display:block" >hello there</h1>
     <script>
            var h1 = document.getElementById("hello");
    
            function hide() {
                if (h1.style.display === "block"){
                    h1.style.display ="none"
                    console.log ("display none")
                } else if (h1.style.display === "none"){
                    h1.style.display ="block"
                    console.log ("display block")
                }
            }
        </script>
</html>

Collectives™ on Stack Overflow

JS function if/else to toggle display not working

7 Answers 7

1 Comment

Comments

Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related