www.webdeveloper.com
Results 1 to 5 of 5

Thread: Object.display.none

  1. #1
    Join Date
    Jul 2009
    Location
    UK
    Posts
    174

    Object.display.none

    hi

    A toggle function:

    Code:
    <script language="javascript"> 
    
    function toggle() {
    	var ele = document.getElementById("toggleText");
    	var text = document.getElementById("displayText");
    		
    		if(ele.style.display == "block") {
    			ele.style.display = "none";
    			text.innerHTML = "show";
    		} else {
    			ele.style.display = "block";
    			text.innerHTML = "hide";
    		}
    } 
    </script>
    and the HTML:

    HTML Code:
    <a id="displayText" class="spoiler" href="javascript:toggle();">show</a>
    <div id="toggleText" style="background:#efefef; border:1px dashed #101010; height: 300px; display: none; width:300px;">
     <p>
    d ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
    eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem 
    sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisc
    </p>
    
    </div>
    And my thoughts, or confusion:


    1. The document loads.
    2. The <div id="toggleText"> is set to

    Code:
    display:none
    Upon calling the toggle() function. When this function first fires, the block:

    Code:
    if(ele.style.display == "block") {
    	ele.style.display = "none";
    	text.innerHTML = "show";
    	} else {
    ...
    	}
    evaluates to TRUE. But from 2. the display is set to none? So how can this:

    Code:
    ele.style.display == "block"
    be true?

    I take note of the '==' operator from
    Code:
    if(ele.style.display == "block")
    Is it then that an element can BOTH be set to display.none and be referred to as a block?

    OR

    If an element is set to display.none is it also a block?




    Can someone clarify this for me.
    Success is the ablility to go from one failure to another without loss of enthusiasm.
    -- Sir Winston Churchill.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,030
    if I understand your question, it's about the sequence of events. this line:

    if(ele.style.display == "block") {

    checks to see if the display is block

    if so, this line:
    ele.style.display = "none";

    changes the display from block to none

    == is for comparing values

    = is for assigning values

    or were you asking something else?

  3. #3
    Join Date
    Jul 2009
    Location
    UK
    Posts
    174
    Quote Originally Posted by xelawho View Post
    if I understand your question, it's about the sequence of events. this line:

    if(ele.style.display == "block") {

    checks to see if the display is block

    if so, this line:
    ele.style.display = "none";

    changes the display from block to none

    == is for comparing values

    = is for assigning values

    or were you asking something else?

    hi

    Thinking out loud:

    Code:
    if(ele.style.display == "block") {
    			
     //no, it's display value is set to none
     // so this block is FALSE
     //go to the else clause
    
    	} else {
    			ele.style.display = "block";
    			text.innerHTML = "hide";
    		}
    and now I'm proved wrong??
    Success is the ablility to go from one failure to another without loss of enthusiasm.
    -- Sir Winston Churchill.

  4. #4
    Join Date
    Nov 2010
    Posts
    1,030
    I don't understand what you're asking if you were proved wrong.

    one compares, one assigns.

    = and == are vastly different operators.

  5. #5
    Join Date
    Jul 2009
    Location
    UK
    Posts
    174

    re

    hi
    I'm aware of '=' assignment and '==' comparison operators.

    I'm having a noob moment me thinks.

    So when i fire the function for the first time:
    Code:
    function toggle() {
    	var ele = document.getElementById("toggleText");
    	var text = document.getElementById("displayText");
    		
    		if(ele.style.display == "block") { /*Returns FALSE, since #toggleText is
    originally set to display='none'. Now go to the else clause and display the element as a block.
    
    */
    			ele.style.display = "none";
    			text.innerHTML = "show";
    		} else {
    			ele.style.display = "block";
    			text.innerHTML = "hide";
    		}
    } 
    </script>
    And vice versa depending upon the visibility of the element?



    I get a little muddled with the DOM API and JavaScript sometimes. It's a little different to some of the more lower level scripting languages like PHP.
    Success is the ablility to go from one failure to another without loss of enthusiasm.
    -- Sir Winston Churchill.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles