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

Dev Shed Forums Sponsor:

February 12th, 2013, 12:11 PM

Ihatephp

Contributing User

Join Date: Oct 2012

Posts: 55

Time spent in forums: 10 h 32 m 31 sec
Reputation Power: 1

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>

February 12th, 2013, 12:44 PM

Jacques1

pollyanna

Join Date: Jul 2012

Location: Germany

Posts: 1,855

Time spent in forums: 1 Month 2 Weeks 1 Day 16 h 1 m 2 sec
Reputation Power: 813

Hi,

Quote:

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 • The mystery of errors and exceptions

February 14th, 2013, 01:44 AM

Ihatephp

Contributing User

Join Date: Oct 2012

Posts: 55

Time spent in forums: 10 h 32 m 31 sec
Reputation Power: 1

Thank you

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

Thank you

Quote:

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.

February 14th, 2013, 09:53 AM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 601

Time spent in forums: 1 Week 1 Day 13 h 25 m 38 sec
Reputation Power: 69

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.

February 18th, 2013, 03:53 AM

Ihatephp

Contributing User

Join Date: Oct 2012

Posts: 55

Time spent in forums: 10 h 32 m 31 sec
Reputation Power: 1

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

Quote:

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.

February 18th, 2013, 09:05 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 601

Time spent in forums: 1 Week 1 Day 13 h 25 m 38 sec
Reputation Power: 69

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>

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

Developer Shed Advertisers and Affiliates