problem with element.style.display defaulting to null

I was able to find over at CSS-Discuss a thread explaining why this happens: because the property is read from the element's style attribute or whatever is set by JavaScript.

So then this presents a problem with trying to create a generic display toggle switch that I am unsure of how to bypass.

It's easy if all of your elements are going from 'off' to 'on' or vice versa, because then you could have something like this:


function toggleDisplay(elem) { // used for show/hide features
var elem = document.getElementById(elem);
if ((elem.style.display == "none") || (elem.style.display == "")) {
elem.style.display = "block";
} else {
elem.style.display = "none";
}
return false;
}


Or of course, vice versa:


function toggleDisplay(elem) { // used for show/hide features
var elem = document.getElementById(elem);
if ((elem.style.display == "block") || (elem.style.display == "")) {
elem.style.display = "none";
} else {
elem.style.display = "block";
}
return false;
}


But, neither of these will account for a page with elements that default to 'off' AND elements that default to 'on.' In the first scenario, for instance, elements defaulted to 'on' are then turned on again, before being turned 'off' on the second click of the toggle button.

Has anybody dealt with this?

Almost everybody.

function toggleDisplay(elem_id)
{
var elem = document.getElementById(elem_id);
if (elem)
elem.style.display = (elem.style.display == 'none') ? '' : 'none';
return false;
}

Haha... fair enough.

So what is that "?" operator? I have seen that, but am unfamiliar with its purpose. You can just tell me what it means or is named and I can find out the rest.

(I've been feeling guilty about how much I'm posting today because some people get all pissy about folks seeming like they want all the work done for them. This is not my intention, for the record... I just prefer talking to another person rather than pouring over text.)

Edit: Okay, I tried implementing that and my lack of understanding about what the syntax is saying is a problem. For instance, how can I add the ability to show hidden elements with the same switch?

The 'conditional' or 'ternary' (three-operand) operator is just a compacted version of if-else; the logical processing is the same so it's no more efficient, just different-looking. Some people find it less clear, and get all pissy about its use. Go figure.

Like a lot of JavaScript, lexically it's a lot more flexible than it seems at first glance. You can do some interesting things with those operands...also, you can chain them together into the equivalent of a switch/case:

var x = (z == 'foo') ? 'yoo' : (z == 'hoo') ? 'hah' : (z == 'goo') ? 'ick' : '99%';

The first operand after the ? gets assigned/runs if the conditional evaluates to true; the second one gets the nod (possibly continuing the process) otherwise. Parentheses optional, in most cases (not all).

http://www.chinalinuxpub.com/doc/oreillybookself/web/jscript/ch04_09.htm