Two Matching IDs (won’t validate)

@TitanVexMay 01.2012

Hello,
I am working on a website and have 2 id’s that match. However, all I am trying to do is validate the code.

The second time I use the ID, I have to, because the JavaScript in my code needs to read the ID. It is unable to read a class attribute, and the rel attribute won’t work either, since I am using custom values. Therefore, it has to be an ID attribute.

However, if the JavaScript reads the ID, then the first time I use the id, it also must be an ID. This puts me in an awkward position of having to have 2 ID attributes.

Basically, I need to know if there is a way to validate while having 2 IDs. Otherwise, is there a way to validate a ‘rel’ attribute with a custom value?

Thank you very much.

-TitanVex

to post a comment

HTML

11 Comments(s) _↴

@holyhttpMay 01.2012 — #An ID needs to be unique in a given web page: that's the whole point of it. Use classes. Javascript can ready classes (getElementsByClassName) but will return an array.

So by using the same ID twice you are violating an important design principle and it will cost you dearly later if you do not make the proper corrections now.

@aj_nscMay 01.2012 — #IE<9 doesn't have the getElementsByClassName method.

@Titan, HTML IDs must be unique, no if's and's or but's about it. Not only is it not valid HTML to duplicate an ID, browser behaviour can easily be unexpected as no browser is supposed to support the possibility of getElementById() matching more than one element (hence get[B]Element[/B]ById and get[B]Elements[/B]ByTagName).

You can always use a different ID and use both ID's in your JavaScript code. But that might not work depending on exactly what you are trying to do. Could you explain in a little more detail what it is that you are trying to accomplish?

@CharlesMay 01.2012 — #IE<9 doesn't have the getElementsByClassName method.[/QUOTE]Nor does the DOM spec, I believe. But it's easy enough to make your own getElementsByClassName--and easier still if you aren't using multiple classes with the elements that you are looking for.

@TitanVexauthorMay 01.2012 — #Thank you everyone for your help. It isn't a huge deal that I have it validated (this is just for a project), but I would feel better about it being a professional website.

Here is the link to the site that uses the JavaScript:

http://students.uwsp.edu/ntowl795/cnmt210/finalproject/about.html

And here is my code (I have truncated it, just so you can get the picture):

[code=html]<div class="pane">
 <p>
 <h1>Missions</h1>
 <h5>Select a Mission to the left to see where it is located on the map.</h5>
 <div class="menu"></div>
 <div class="demo1">
 <img src="images/world_map.jpg" class="imgMap" alt="worldmap"/>
 
   <div class="marker" id="mis1" data-coords="475, 540">
   <h3>Operation 40</h3>
   <br>
   <br>
   <p >
   Plan a very risky assassination during the Bay of Pigs Invasion. 
   </p>
   </div>
   <div class="marker" id="mis2" data-coords="1246, 214">
   <h3>Escape</h3>
   <br>
   <br>
   <p>
   Vorkuta which is a brutal Soviet labor camp that you must escape from, if you didn't catch the camp itself is named Vorkuta.
   </p>
   </div>
   <div class="marker" id="mis3" data-coords="510, 430">
   <h3>U.S.D.D.</h3>
   <br>
   <br>
   <p>
   Meet up with top senior officials in US soil to discuss about the threat posed by General Dragovich.
   </p>
   </div>
 
   </div>
   <div class="controls">
   <a href="#" id="mis1">Mission 1</a>
   <a href="#" id="mis2">Mission 2</a>
   <a href="#" id="mis3">Mission 3</a>
 
   </div>
   </div>[/code]

I tried changing the JavaScript to "class", rather than "id", but I continuously got errors. Thank you all once again for your help, I really appreciate it.

@JPnycMay 01.2012 — #There's more to this than just not validating. The script simply won't work with duplicate IDs. They must [B]never [/B]be duplicated under any circumstances. IDs MUST be unique on each page, period.

@TitanVexauthorMay 01.2012 — #There's more to this than just not validating. The script simply won't work with duplicate IDs. They must [B]never [/B]be duplicated under any circumstances. IDs MUST be unique on each page, period.[/QUOTE]

Well it works for me right now. Originally, I had the "rel" attribute to the <a> tag. But that wouldn't validate either. I am not sure what I would have to do to make this both work AND validate.

@holyhttpMay 01.2012 — #All 4 people who tried to help agreed on the fact that an ID should not be duplicated in a web page. Just because "Well it works for me right now" for some web browsers is not a valid reason to proceed that way. As I mentioned it will cost you a lot more and you are already experiencing the consequences.

Do yourself a favor and make the corrections to your JavaScript code to use CSS classes.

@TitanVexauthorMay 01.2012 — #All 4 people who tried to help agreed on the fact that an ID should not be duplicated in a web page. Just because "Well it works for me right now" for some web browsers is not a valid reason to proceed that way. As I mentioned it will cost you a lot more and you are already experiencing the consequences.

Do yourself a favor and make the corrections to your JavaScript code to use CSS classes.[/QUOTE]

I know that. That is what I am trying to do. That is why I made this thread, so I could fix the problem. I want to know if there is any way to fix it. Because changing the 'id' to a 'class' doesn't work. And it won't validate if it is 'rel' either.

Does anyone have suggestions?

@CharlesMay 01.2012 — #Does anyone have suggestions?[/QUOTE]Make your own getElementsByClassName. Will you be searching for instances where a single element belongs to more than one class?

@JPnycMay 01.2012 — #Where is the dupe ID in that code? I don't see it.

@TitanVexauthorMay 01.2012 — #Where is the dupe ID in that code? I don't see it.[/QUOTE]

Near the top I have:

[code=html]<div class="marker" id="mis1" data-coords="475, 540">
 <h3>Operation 40</h3>
 <br>
 <br>
 <p >
 Plan a very risky assassination during the Bay of Pigs Invasion.
 </p>
 </div>[/code]

And near the bottom I have:

[code=html]<div class="controls">
 <a href="#" id="mis1">Mission 1</a>
 <a href="#" title="b">Mission 2</a>
 <a href="#" title="c">Mission 3</a>
 
   </div>[/code]

I duplicated [B]id="mis1"[/B]

Also in #HTML _↴

Spacing problem Specifying HTML variables in the URL Table ID not working.

Success!

Help @TitanVex spread the word by sharing this article on Twitter...

Tweet This

Two Matching IDs (won’t validate)

11 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Two Matching IDs (won’t validate)

11 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #HTML _↴