dcsimg
www.webdeveloper.com
Results 1 to 12 of 12

Thread: Two Matching IDs (won't validate)

  1. #1
    Join Date
    Apr 2012
    Posts
    9

    Two Matching IDs (won't validate)

    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

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    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.

  3. #3
    Join Date
    Dec 2005
    Posts
    2,984
    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 getElementById and getElementsByTagName).

    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?

  4. #4
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    Quote Originally Posted by aj_nsc View Post
    IE<9 doesn't have the getElementsByClassName method.
    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.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  5. #5
    Join Date
    Apr 2012
    Posts
    9
    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/cn...ect/about.html

    And here is my code (I have truncated it, just so you can get the picture):
    HTML Code:
    <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>
    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.

  6. #6
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    There's more to this than just not validating. The script simply won't work with duplicate IDs. They must never be duplicated under any circumstances. IDs MUST be unique on each page, period.

  7. #7
    Join Date
    Apr 2012
    Posts
    9
    Quote Originally Posted by JPnyc View Post
    There's more to this than just not validating. The script simply won't work with duplicate IDs. They must never be duplicated under any circumstances. IDs MUST be unique on each page, period.
    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.

  8. #8
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    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.

  9. #9
    Join Date
    Apr 2012
    Posts
    9
    Quote Originally Posted by holyhttp View Post
    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.
    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?

  10. #10
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    Quote Originally Posted by TitanVex View Post
    Does anyone have suggestions?
    Make your own getElementsByClassName. Will you be searching for instances where a single element belongs to more than one class?
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  11. #11
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    Where is the dupe ID in that code? I don't see it.

  12. #12
    Join Date
    Apr 2012
    Posts
    9
    Quote Originally Posted by JPnyc View Post
    Where is the dupe ID in that code? I don't see it.
    Near the top I have:
    HTML Code:
    <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>
    And near the bottom I have:
    HTML Code:
    <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>
    I duplicated id="mis1"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles