Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:

    Code:
    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:

    Code:
    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?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Almost everybody.
    Code:
    function toggleDisplay(elem_id) 
    {
    	var elem = document.getElementById(elem_id);
    	if (elem)
    		elem.style.display = (elem.style.display == 'none') ? '' : 'none';
    	return false;
    }

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by ]|V|[agnus; 06-24-2004 at 10:25 PM.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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:
    Code:
    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/ore...pt/ch04_09.htm


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •