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

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2

    Can anyone help me out with simple show/hide code, please?


    I'm trying to show lists of product that falls under certain categories. Categories needs to be chosen by user using select tag.

    And I can't tell what's wrong with this code below.
    Please, someone help me out..




    Code:
    <script>
    	function showCertainCategory(selection)
    	{ 
    		var ulTag = document.getElementByTagName('ul');
                   ulTag.style.display = "none";
    		for( i=0; i<ulTag.length; i++)
    		{
    			if(ulTag.className == selection)
    			{
    				ulTag.style.display = "block";
    			}
    			else
    			{
    				ulTag.style.display = "none";
    			}
    		}
    	}
    	
    </script>
    <form>
    	<select id="category" onChange="showCertainCategory(this.value)">
    		<option value="handle">handle</option>
    		<option value="wheel">wheel</option>
    	</select>
    </form>
    
    <ul class='handle'>
    	<li>Handle product A</li>
    	<li>handle</li>
    </ul>
    <ul class='wheel'>
    	<li>Wheel product B</li>
    	<li>wheel</li>
    </ul>
    <ul class='handle'>
    	<li>Handle product A2</li>
    	<li>handle</li>
    </ul>
    <ul class='wheel'>
    	<li>Wheel product B2</li>
    	<li>wheel</li>
    </ul>
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    Hi,

    Originally Posted by Ihatephp
    And I can't tell what's wrong with this code below.
    We can't either, because we don't know what you expect and what you get. When you get an error, please describe it so that we actually know what this is about. The JavaScript console of your browser will display the exact error message (in case there is one).

    In general, you somehow confuse arrays and single elements. It's getElementsByTagName with an "s", and this method actually yields an array of HTML elements. So the loop makes sense, but the ulTag.className and ulTag.style don't.

    If you rename "ulTag" to "ulTags", it probably becomes more clear.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2
    Thank you

    I just wanted to selected tags to be shown after onChange was triggered.

    Thank you








    Originally Posted by Jacques1
    Hi,



    We can't either, because we don't know what you expect and what you get. When you get an error, please describe it so that we actually know what this is about. The JavaScript console of your browser will display the exact error message (in case there is one).

    In general, you somehow confuse arrays and single elements. It's getElementsByTagName with an "s", and this method actually yields an array of HTML elements. So the loop makes sense, but the ulTag.className and ulTag.style don't.

    If you rename "ulTag" to "ulTags", it probably becomes more clear.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,119
    Rep Power
    119
    I think your trying to do this (correct?):

    Code:
    <style>
    .handle, .wheel {
    display:none;
    }
    </style>
    
    <script>
    	function showCertainCategory(selection)
    	{ 
    		var ulTag = document.getElementsByTagName('ul');
    		for(i=0;i<ulTag.length;i++)
    		{
    			if(ulTag[i].className == selection)
    			{
    				ulTag[i].style.display = "block";
    			}
    			else
    			{
    				ulTag[i].style.display = "none";
    			}
    		}
    	}
    	
    </script>
    <form>
    	<select id="category" onChange="showCertainCategory(this.value)">
    		<option selected>Select A Category</option>
    		<option value="handle">handle</option>
    		<option value="wheel">wheel</option>
    	</select>
    </form>
    
    <ul class='handle'>
    	<li>Handle product A</li>
    	<li>handle</li>
    </ul>
    <ul class='wheel'>
    	<li>Wheel product B</li>
    	<li>wheel</li>
    </ul>
    <ul class='handle'>
    	<li>Handle product A2</li>
    	<li>handle</li>
    </ul>
    <ul class='wheel'>
    	<li>Wheel product B2</li>
    	<li>wheel</li>
    </ul>
    If not, please elaborate; on what your trying to do.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2
    Thanks

    Well, sort of..

    But I want the contents to be full visible at the beginning and once I make change on select box, only the selected ones are going to be shown.

    Does that make sense??




    Originally Posted by web_loone08
    I think your trying to do this (correct?):

    Code:
    <style>
    .handle, .wheel {
    display:none;
    }
    </style>
    
    <script>
    	function showCertainCategory(selection)
    	{ 
    		var ulTag = document.getElementsByTagName('ul');
    		for(i=0;i<ulTag.length;i++)
    		{
    			if(ulTag[i].className == selection)
    			{
    				ulTag[i].style.display = "block";
    			}
    			else
    			{
    				ulTag[i].style.display = "none";
    			}
    		}
    	}
    	
    </script>
    <form>
    	<select id="category" onChange="showCertainCategory(this.value)">
    		<option selected>Select A Category</option>
    		<option value="handle">handle</option>
    		<option value="wheel">wheel</option>
    	</select>
    </form>
    
    <ul class='handle'>
    	<li>Handle product A</li>
    	<li>handle</li>
    </ul>
    <ul class='wheel'>
    	<li>Wheel product B</li>
    	<li>wheel</li>
    </ul>
    <ul class='handle'>
    	<li>Handle product A2</li>
    	<li>handle</li>
    </ul>
    <ul class='wheel'>
    	<li>Wheel product B2</li>
    	<li>wheel</li>
    </ul>
    If not, please elaborate; on what your trying to do.
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,119
    Rep Power
    119
    try this, then:

    Code:
    <style>
    .handle, .wheel {
    display:block;
    }
    </style>
    
    <script>
    	function showCertainCategory(selection)
    	{ 
    		var ulTag = document.getElementsByTagName('ul');
    		for(i=0;i<ulTag.length;i++)
    		{
    			if(ulTag[i].className == selection)
    			{
    				ulTag[i].style.display = "block";
    			}
    			else if(selection == "startOver")
    			{
    				ulTag[i].style.display = "block";
    			}
    			else
    			{
    				ulTag[i].style.display = "none";
    			}
    		}
    	}
    	
    </script>
    <form>
    	<select id="category" onChange="showCertainCategory(this.value)">
    		<option value="startOver" selected>Select A Category</option>
    		<option value="handle">handle</option>
    		<option value="wheel">wheel</option>
    	</select>
    </form>
    
    <ul class='handle'>
    	<li>Handle product A</li>
    	<li>handle</li>
    </ul>
    <ul class='wheel'>
    	<li>Wheel product B</li>
    	<li>wheel</li>
    </ul>
    <ul class='handle'>
    	<li>Handle product A2</li>
    	<li>handle</li>
    </ul>
    <ul class='wheel'>
    	<li>Wheel product B2</li>
    	<li>wheel</li>
    </ul>

IMN logo majestic logo threadwatch logo seochat tools logo