#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2

    Why do we have to set display value to "none"?


    Hi there.

    I'm learning JavaScript and creating this small system where a user gets to pick one selection out of a select box, and then only the contents that fall under the category selected by the user stay on screen and others all disappear. When a selection "All" is selected, all the contents will remain on the screen.

    And I have this question:
    Why do we have to set display value to "none" in the beginning of the For loop which is used to see if the condition is met checking through each element to be looped? I did some experiences and it turned out that, without setting the value to "none", no contents will remain on the screen when "All" is selected.
    Please someone tell me why??
    The script below is the actual script.

    ==== External JavaScript ====
    Code:
    window.onload = function()
    {
    	
    	
    	var selection = document.getElementById("selectionForTheExternalJavascript");
         selection.onchange = function()
        {  
    	    var changedValue = this.value;
    	    var divId = document.getElementById('divId');
    		var ulTag = divId.getElementsByTagName('ul');
    		for(var i=0; i<ulTag.length; i++)
    		{
    		  ulTag[i].style.display = "none";   // <------- This line is where I'm having a question with!! Why is this line needed??
    			if(ulTag[i].className == changedValue || changedValue=='all')
    			{
    				ulTag[i].style.display="block";
    			}
    			else
    			{
    				ulTag[i].style.display="none";
    			}
    	    }
        }
    }



    ====== HTML script =======

    Code:
    <form>
    	<select id="selectionForTheExternalJavascript">
    		<option value='all'>All</option>
    		<option value='type1'>Type 1</option>
    		<option value='type2'>Type 2</option>
    	</select>
    </form>
    
    <!--Contents that can be shown or hidden according to user selection start from here-->
    <div id='divId'>
    
    <ul class="type1"><li>Product of type 1</li></ul>
    <ul class="type2"><li>Product of type 2</li></ul>
    <ul class="type1"><li>Product of type 1</li></ul>
    <ul class="type2"><li>Product of type 2</li></ul>
    
    </div>
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2790
    It is not needed, either remove that line or the else clause. The efficiency difference between them is negligible.

    Basically the code is wrong. Unless it is making a point in your lesson.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2
    Originally Posted by Winters
    It is not needed, either remove that line or the else clause. The efficiency difference between them is negligible.

    Basically the code is wrong. Unless it is making a point in your lesson.

    Thanks for your reply.

    Is this code wrong to begin with?
    How is it wrong? How would you change it, please?

IMN logo majestic logo threadwatch logo seochat tools logo