getElementById with same ids

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

getElementById with same ids

Post by kendall »

Hey guys,

not a javascript guru but can i was trying to create a toggle function to toggle the display style property of <tr>. Thing is i have several <tr> with the same id (this is intentional). So i am only getting the first element with the corresponsgin id to show. can i access and change the display style of ALL the <tr> that have the same id at a given time?

Kendall

P.S. i have noticed that I.E. has a document.all which can perform this. Is this still an I.E. specific syntax? is there any equvilent to this for cross-browser compatability?
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

Ids must be unique. You cannot have multiple IDs that are the same thing: this is syntactically incorrect. You should use Classes.
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

getElementById with same ids

Post by kendall »

OK OK OK OK OK! i know i know! why must we all conform to the norm!!? i will use an alternative. :cry:
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

Because web conformance is good. Second to logical page designs.

I'm wondering... why did you intentionally have multiple IDs the same?
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

getElementById with same ids

Post by kendall »

Well, sigh. it was to fit into a design that my client had.

Code: Select all

function ToggleSubMenu(menuid){
	var submenu = document.all(menuid);// get menu row(s)
	// check if the menu is show or hide
	for(i=0;i<submenu.length;i++){
		var menu = submenu&#1111;i];
		if(menu.style.display == 'none'){
			menu.style.display = 'inline';
		}else{
			menu.style.display = 'none';
		}
	}
	
}

Code: Select all

<table width=&quote;93%&quote; border=&quote;1&quote; cellpadding=&quote;3&quote; cellspacing=&quote;0&quote; bordercolor=&quote;#999999&quote; >
      <tr onclick=&quote;ToggleSubMenu('submenu1')&quote;>
        <td width=&quote;12%&quote; align=&quote;center&quote; valign=&quote;middle&quote; bgcolor=&quote;#CCCCCC&quote;><img src=&quote;images/wht_triangle.gif&quote; width=&quote;10&quote; height=&quote;12&quote;></td>
        <td width=&quote;88%&quote; class=&quote;style10&quote;><a href=&quote;#&quote;>Sunless Tanning</a></td>
      </tr>
      <tr id=&quote;submenu1&quote; class=&quote;submenu&quote;>
        <td align=&quote;center&quote; valign=&quote;middle&quote;><img src=&quote;images/blue_triangle.gif&quote; width=&quote;10&quote; height=&quote;12&quote;></td>
        <td align=&quote;left&quote; valign=&quote;middle&quote; class=&quote;style10&quote;>Air Brush Tan </td>
      </tr>
      <tr id=&quote;submenu1&quote; class=&quote;submenu&quote;>
        <td align=&quote;center&quote; valign=&quote;middle&quote;><img src=&quote;images/blue_triangle.gif&quote; width=&quote;10&quote; height=&quote;12&quote;></td>
        <td align=&quote;left&quote; valign=&quote;middle&quote; class=&quote;style10&quote;>Applicators</td>
      </tr>
      <tr id=&quote;submenu1&quote; class=&quote;submenu&quote;>
        <td align=&quote;center&quote; valign=&quote;middle&quote;><img src=&quote;images/blue_triangle.gif&quote; width=&quote;10&quote; height=&quote;12&quote;></td>
        <td align=&quote;left&quote; valign=&quote;middle&quote; class=&quote;style10&quote;>Exfoliants</td>
      </tr>
      <tr id=&quote;submenu1&quote; class=&quote;submenu&quote;>
        <td align=&quote;center&quote; valign=&quote;middle&quote;><img src=&quote;images/blue_triangle.gif&quote; width=&quote;10&quote; height=&quote;12&quote;></td>
        <td align=&quote;left&quote; valign=&quote;middle&quote; class=&quote;style10&quote;>Instant Sunless Tanning </td>
      </tr>
      <tr id=&quote;submenu1&quote; class=&quote;submenu&quote;>
        <td align=&quote;center&quote; valign=&quote;middle&quote;><img src=&quote;images/blue_triangle.gif&quote; width=&quote;10&quote; height=&quote;12&quote;></td>
        <td align=&quote;left&quote; valign=&quote;middle&quote; class=&quote;style10&quote;>Liquid Metallic Bronzers </td>
      </tr>
      <tr>
        <td align=&quote;center&quote; valign=&quote;middle&quote; bgcolor=&quote;#CCCCCC&quote;>&nbsp;</td>
        <td class=&quote;style10&quote;>&nbsp;</td>
      </tr>
      <tr>
        <td align=&quote;center&quote; valign=&quote;middle&quote; bgcolor=&quote;#CCCCCC&quote;>&nbsp;</td>
        <td class=&quote;style10&quote;>&nbsp;</td>
      </tr>
      <tr>
        <td align=&quote;center&quote; valign=&quote;middle&quote; bgcolor=&quote;#CCCCCC&quote;>&nbsp;</td>
        <td class=&quote;style10&quote;>&nbsp;</td>
      </tr>
      <tr>
        <td align=&quote;center&quote; valign=&quote;middle&quote; bgcolor=&quote;#CCCCCC&quote;>&nbsp;</td>
        <td class=&quote;style10&quote;>&nbsp;</td>
      </tr>
      <tr>
        <td align=&quote;center&quote; valign=&quote;middle&quote; bgcolor=&quote;#CCCCCC&quote;>&nbsp;</td>
        <td class=&quote;style10&quote;>&nbsp;</td>
      </tr>
      <tr>
        <td align=&quote;center&quote; valign=&quote;middle&quote; bgcolor=&quote;#CCCCCC&quote;>&nbsp;</td>
        <td class=&quote;style10&quote;>&nbsp;</td>
      </tr>
      <tr>
        <td align=&quote;center&quote; valign=&quote;middle&quote; bgcolor=&quote;#CCCCCC&quote;>&nbsp;</td>
        <td class=&quote;style10&quote;>&nbsp;</td>
      </tr>
    </table>
The code above represents a table i made in which some table rows are "sub menus".
Now... i could have just nested a "list" within a table row and toggle the table row its self but it wouldn't have conformed to design. i had know choice
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

use an incrementing numeric format you should for the ids.

to display or hide multiple at one time, use a for loop you could:

ex:

Code: Select all

<script>
function hideIt(){
  for(var i=1;i<4;i++){
    document.getElementById('myid'+i).style.display = 'none';
  }
}
</script>
<table>
<tr id=&quote;myid1&quote;>
<td>Stuff</td>
</tr>

<tr id=&quote;myid2&quote;>
<td>Stuff</td>
</tr>

<tr id=&quote;myid3&quote;>
<td>Stuff</td>
</tr>
</table>
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

getElementById with same ids

Post by kendall »

well that is a thought. however there would be more than 1 menu with sub menus and the sub menus will change in numbers from time to time. i'll stick with the same id theory. sub rules were perhaps meant to be broken.

LOL@ speak like Yoda day!
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

It's not incredibly well documented, but there is a JS function called getElementByType().

Obviously, you could call it like:

Code: Select all

document.getElementByType('tr').style.display=none;

//or if you don't want to affect all <tr>, maybe this
var table_to_affect = document.getElementById('myTable');
table_to_affect.getElementByType('tr').style.display=none;
I pulled the second line off the top of my head, so I'm not sure it'll work.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Re: getElementById with same ids

Post by Roja »

kendall wrote:well that is a thought. however there would be more than 1 menu with sub menus and the sub menus will change in numbers from time to time. i'll stick with the same id theory. sub rules were perhaps meant to be broken.
Actually, they arent. In fact, in some web browsers, duplicate ID's will trigger javascript errors, display errors, or quirks mode.

Its *wrong*, *wrong*, wrong. ID's exist to be unique, so that you can pick *one* to target. What you want is better served by using a class, since that is their nature - mutliple elements that belong to one style/type. Then you can get elements in a class, target styling by class, or even getelement by type.

In any case, the standard exists for a reason, and not just because someone felt like it. Going against the grain ensures that current and future browsers will hate your code.

Why <span style='color:blue' title='I'm naughty, are you naughty?'>smurf</span> off the already picky browsers?
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

getElementById with same ids

Post by kendall »

OK then well does it work in I.E. for crying out loud!!! not that i am a activist or anything. Anyway i am always a webmaster that tries to stick to the rules. But gosh man! I don't see the effectiveness of using the getElementByType or the class to make life easier. You're saying i need to create a class for each batch of submenus? songs like a bit unnecessary. However, i will take your advice.

Thanks for the comments

Kendall
Post Reply