Page 1 of 1

getElementById with same ids

Posted: Wed Jun 01, 2005 2:37 pm
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?

Posted: Wed Jun 01, 2005 3:13 pm
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.

getElementById with same ids

Posted: Wed Jun 01, 2005 3:17 pm
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:

Posted: Wed Jun 01, 2005 3:18 pm
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?

getElementById with same ids

Posted: Wed Jun 01, 2005 3:25 pm
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

Posted: Wed Jun 01, 2005 3:35 pm
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>

getElementById with same ids

Posted: Wed Jun 01, 2005 3:48 pm
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!

Posted: Wed Jun 01, 2005 3:55 pm
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.

Re: getElementById with same ids

Posted: Wed Jun 01, 2005 5:34 pm
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?

getElementById with same ids

Posted: Thu Jun 02, 2005 8:35 am
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