Can't hide a DIV

Question

I'm going bananas here because when I execute the following code:

myDiv.className += condition ? " green" : " red hidden";
console.log("class: " + myDiv.className);

I get to see the text as supposed to. In fact, I even see the red border around my thingy! However, for some (for me explainable) reason, the component is still visible. It's either divine intervention intended on ruining my Christmas or I'm missing something extremely basic due to fatigue. Which is it? Does God hate me, now? :)

.hidden{ display: none; }
.green{ border: 3px solid #00bb00; }
.red{ border: 3px solid #dd0000; }

Answer 1

It is likely that some other selector is outweighing your .hidden class in its specificity. For instance, consider the following code:

​var myDiv = document.querySelector("#foo");
myDiv.className = (false) ? "grn" : "red hidden";

In this example, like yours, the result is a className of red hidden, applying both of the following:

.hidden { display: none }
.red { border: 2px solid red }

But my element is still visible:

When I inspect the styles of this element, it's clear what the problem is - I have a more specific selecto #foo in this case that is overruling the .hidden class:

Another option could be that you have similar scripting in another place, further modifying the className of this element. You could insert a debugging point using the debugger keyword, and then step through the execution of your code on your page.

Answer 2

There probably is an other script that runs and removes the class named hidden (quite common name) and my guess is that whoever wrote that code, selects the elements by class, not by id. So probably, that person has an unintentionally wide scope of the removal.

Check the remains of the class names. You've got a space at the end. That's pretty strong suggestion that there has been something but was removed. (Extra minus to the coder for not removing the space).

You should talk to that programmer and explain how to do his operation more safely.