Javascript display == "none" not actually displaying

Question

I wrote a basic toggle function that I have used before but for some reason it is not entirely working. The reason I say that is because when I console log the display it says the display is none but the element never disappears. I know for a fact that the function is firing and that it detects the elements display as "", however it sets it to none (and logging that to the console proves it) but the actual element does not disappear from the screen.

function filter_toggle(){
    var form = document.getElementById("filter_form");
    var display = form.style.display;
    console.log(display);
    if (display == ""){
        display = "none";
    }
    else if (display == "none"){
        display = "";
    }
}

<div id="filter_wrap">
                <div id="filter_toggle" class="basic_toggle" onclick="filter_toggle()">--Filter--</div>
                <div id="filter_form" class="bg-1D1D1D">
                ...more elements...
                </div>
</div>

you can't modify an object property like that ... once you've assigned display = form.style.display - var display is a String, which has a copy of the value that is in form.style.display — Jaromanda X
– Jaromanda X, Commented Oct 26, 2020 at 22:56
Your console.log() also won't log anything as you aren't passing anything to it. Try console.log("display", display) — scrappedcola
– scrappedcola, Commented Oct 26, 2020 at 22:59
Haha yes I removed what was inside of the console.log while debugging sorry for that. — Filtered
– Filtered, Commented Oct 26, 2020 at 23:03

Djaouad · Accepted Answer · 2020-10-26 23:13:24Z

2

The variable display has been assigned the value of the display property of the object (which is a string value), changing the variable will not change the property, instead, you can use style:

function filter_toggle() {
  var form = document.getElementById("filter_form");
  var style = form.style;
  
  if (style.display != "none") {
    style.display = "none";
  } else if (style.display == "none") {
    style.display = "block";
  }
}

<div id="filter_wrap">
  <div id="filter_toggle" class="basic_toggle" onclick="filter_toggle()">--Filter--</div>
  <div id="filter_form" class="bg-1D1D1D">
    Hello, World!
  </div>
</div>

edited Oct 26, 2020 at 23:13

answered Oct 26, 2020 at 22:55

Djaouad

22.8k4 gold badges37 silver badges57 bronze badges

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

1 Comment

Filtered Over a year ago

Omg thank you so much I would have never thought to do that. Works perfectly!

Scott Marcus · Accepted Answer · 2020-10-26 23:07:54Z

Your code checks the style.display property, but then only sets display, when it should be setting style.display. Also, there's no need (in this case) for else if. You can just use else. And, instead of display = "", it's more accurate to toggle between display:none and display:block (for hiding/showing block level elements, like div or display:inline for hiding/showing inline elements like span).

function filter_toggle(){
    var style = document.getElementById("filter_form").style;
    console.log(style.display);
    if (style.display == "none"){
        style.display = "block";
    } else {
        style.display = "none";
    }
}

<div id="filter_wrap">
                <div id="filter_toggle" class="basic_toggle" onclick="filter_toggle()">--Filter--</div>
                <div id="filter_form" class="bg-1D1D1D" style="display:none;">
                ...more elements...
                </div>
</div>

You could also make this more compact with a ternary operator.

function filter_toggle(){
    var style = document.getElementById("filter_form").style;
    // This is a compact if/then/else
    style.display = style.display == "none" ? "block" : "none";
}

<div id="filter_wrap">
                <div id="filter_toggle" class="basic_toggle" onclick="filter_toggle()">--Filter--</div>
                <div id="filter_form" class="bg-1D1D1D">
                ...more elements...
                </div>
</div>

However, you are reinventing the wheel and using inline styles (which should always be avoided if possible due to the extra code they introduce and their brittle nature). The .classList.toggle() function does this for you and works with more manageable CSS classes:

let form = document.getElementById("filter_form");

function filter_toggle(){
  form.classList.toggle("hidden");
}

.hidden { display:none; }

<div id="filter_wrap">
                <div id="filter_toggle" class="basic_toggle" onclick="filter_toggle()">--Filter--</div>
                <div id="filter_form" class="bg-1D1D1D">
                ...more elements...
                </div>
</div>

Collectives™ on Stack Overflow

Javascript display == "none" not actually displaying

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related