Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Show/Hide GetElementbyId multiple instances 1

Status
Not open for further replies.
Extension

Extension

Programmer
Nov 3, 2004
311
CA
Hi,

I have a form in which I have a drop down menu. I want to show/hide specific row(s) in a table based on the selection. Currently, it's partially working, because only one instance is showing/hiding. So I was wondering how to make it will with multiples instances. I guess I would have to loop around all the "document.getElementById" values ??

Here's my code

Code: 
<html>
<head>
	<title>Untitled</title>
</head>

<body>

<form name="mainForm">
	<select name="mainList" onChange="functionShowHide();">
		<option value="0">A</option> 
		<option value="1" SELECTED>B</option> 
		<option value="2">C</option> 
		<option value="3">D</option> 
	</select>
</form>

<table>
	<tr id="row">
		<td>
			Row 1
		</td>
	</tr>
	<tr>
		<td>
			Row 2
		</td>
	</tr>
	<tr id="row">
		<td>
			Row 3
		</td>
	</tr>
</table>

<script language="JavaScript" type="text/javascript">

	var selectedValue = document.mainForm.mainList.options[document.mainForm.mainList.selectedIndex].value;
	functionShowHide(selectedValue);
	
	function functionShowHide(selectedValue) { 
	
		var selectedValue = document.mainForm.mainList.options[document.mainForm.mainList.selectedIndex].value;
	
		if (selectedValue == "1") {
			document.getElementById("row").style.display = 'none';
		}
	
		else {
			document.getElementById("row").style.display = 'inline';
		}
	} 

</script>

</body>
</html>
 
Sort by date Sort by votes
Hi

Wrong and impossible. The [tt]id[/tt] must be unique. Use [tt]class[/tt]/[tt]className[/tt] and [tt]getElementsByTagName[/tt] :
Code: 
[gray]...[/gray]
    <tr class="row">
[gray]...[/gray]
    <tr class="row">

[gray]...[/gray]

function functionShowHide()
{
  var selectedValue = document.mainForm.mainList.options[document.mainForm.mainList.selectedIndex].value;

  list=document.getElementsByTagName("tr")
  for (i=0;i<list.length;i++)
    if (list[i].className=='row')
      list[i].style.display=selectedValue=='1'?'none':'inline'
}
And I suggest to review the usage of the selectedValue variable.

Feherke.
 
Upvote 0 Downvote
Thanks for the quick reply and for the help.

How can I improve my code ? I'm "defaulting" the selectedValue variable in order to make it work on a page load. Is there another way to do it ?

Thanks again
 
Upvote 0 Downvote
Hi

Well, you declared both a global selectedValue ( outside of any function ) and a local one ( inside functionShowHide() ).

Then you declared a formal parameter also called selectedValue. In one of the function calls you passed an actual parameter, but nuot in the other. But anyway, you did not used the parameter's value, because the function begins with setting selectedValue.

So I would say to remove the parameters from both the declaration and function call and remove the [tt]var[/tt] keyword from the line where you set selectedValue in the function.

Feherke.
 
Upvote 0 Downvote
Thanks for the tips.

One last question.
I don't fully understand this line:
Code: 
list[i].style.display=selectedValue=='1'?'none':'inline'
I would like to apply it if the selectedValue is 1, 2 or 3 but I can't figure out where to put the double vertical bars ( || 2 || 3 etc..)
 
Upvote 0 Downvote
Code: 
list[i].style.display = (selectedValue == '1' || selectedValue == '2' || selectedValue == '3') ? 'none' : 'inline'

This is called a [google]ternary operator[/google]. It's kinda like shorthand for an "if block"

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
 
Upvote 0 Downvote
Hi

That is a shorter alternative of your original [tt]if[/tt] statement :
Code: 
[red]list[i].style.display=[/red][green]selectedValue=='1'[/green][blue]?[/blue][purple]'none'[/purple][fuchsia]:[/fuchsia][olive]'inline'[/olive]

[blue]if[/blue] ([green]selectedValue=='1'[/green]) [red]list[i].style.display=[/red][purple]'none'[/purple] [fuchsia]else[/fuchsia] [red]list[i].style.display=[/red][olive]'inline'[/olive]
I am not sure I understand correctly what you want, maybe this :
Code: 
list[i].style.display=selectedValue=='1' [red]|| selectedValue=='2' || selectedValue=='3'[/red]?'none':'inline'

if (selectedValue=='1' [red]|| selectedValue=='2' || selectedValue=='3'[/red]) list[i].style.display='none' else list[i].style.display='inline'
But if your [tt]option[/tt] [tt]value[/tt]s are those from the sample code, would be easier to test
Code: 
list[i].style.display=selectedValue[red]![/red]='[red]0[/red]'?'none':'inline'

if (selectedValue[red]![/red]='[red]0[/red]') list[i].style.display='none' else list[i].style.display='inline'

Feherke.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
728
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
677
xwb
xwb
chrisjchrisj
  • Locked
  • Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
147
chrisjchrisj
chrisjchrisj
keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
170
Samthyr
Samthyr
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
386
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top