ansaurus

Question

What practical problem will i face if i use same #id more than one time on a page , other than validation error "ID is already defined"?

Answer 1

+2 A:

document.getElementById() won't work reliably.

Annie 2009-12-31 03:47:50

so it's only effect if i use javascript and try to select a #ID

metal-gear-solid 2009-12-31 03:58:50

Yes, but you need to be careful about what JavaScript libraries you're using--they could be selecting by ID under the hood without you realizing it.

Annie 2009-12-31 04:10:41

Answer 2

+1 A:

I've had experiences where certain JavaScript code didn't work as expected because two elements had the same ID. I think getElementById just gets the first element it comes to that has the particular ID.

Brandon Montgomery 2009-12-31 03:49:16

so i would not face any problem if i do not use javascript

metal-gear-solid 2009-12-31 03:52:27

True, but it's easy enough to use different ID's isn't it. I would STRONGLY recommend NOT having duplicate ID's.

Brandon Montgomery 2009-12-31 04:00:33

@Brad- i know it best practice. and i do. i just wanted to know is it really implemented in browser or just a recommendation

metal-gear-solid 2009-12-31 04:07:41

Answer 3

A:

At a minimum, Javascript code which uses getElementById() will return only one of the matching elements - which one will be undefined, and hence subject to cross-browser differences.

Ed Schembor 2009-12-31 03:49:35

what if i not use javascript

metal-gear-solid 2009-12-31 03:50:45

Answer 4

+8 A:

The result is undefined.

Apart from what the rest said about getElementById:

using #foo in CSS may apply to all elements with id="foo", or to the first, or to the last, depending on how the browser is implemented.
using page.html#foo in a URL may scroll to one of the elements, or to the other, or to neither.

edit: either way, you should teach your students to do things right even if doing it wrong doesn't seem to have any immediate bad consequences... ;)

Nicolás 2009-12-31 03:51:04

+1 for mentioning that it can break CSS and anchors as well.

Aaronaught 2009-12-31 04:48:57

@Nicolas - u r right but what reason should be given for now?

metal-gear-solid 2009-12-31 08:51:14

+1 for "do things right even if doing it wrong..." note

Ed Schembor 2009-12-31 14:50:37

Answer 5

+1 A:

"Why I'm saying css #ID should be used once in a page (to my students)?"

"Imagine the trouble it would cause if lots of countries had the same name. ID is identity. Many countries can be an island, or tropical, or as small as a carpet but think of the trouble it would cause if 50 countries were called San Marino."

Gazzer 2009-12-31 13:30:34

Answer 6

+1 A:

I understand why you're asking the question. Tell your students that's it's the potential problems that they will face if they use ID incorrectly. Or, other coders that want to use/alter/correct your code if you write it incorrectly.

In other words, try not to leave slop in your wake when you build your page because it's good practice not to leave slop for other coders. And, if you come back to that page and you want to make it dynamic, you'll have slop when you're done, and you won't know why.

tahdhaze09 2009-12-31 15:31:52

so we can say it's must only for xhtml validation and it would be much better to use once for future dynamic use.

metal-gear-solid 2009-12-31 17:59:40

Also for the sake of semantics. Your layout will have elements that will not repeat on a single page (header, footer, container, sidebar, main menu, etc.). Using those elements multiple times on the page will make for a complete mess in having another coder understand it, not to mention it breaking the layout.

tahdhaze09 2009-12-31 18:24:28

ok so i would say this to students "You should only use an ID name once in any XHTML or HTML document.Browsers do not enforce this rule but it is a basic rule of HTML/XHTML. Duplicate ID tags will cause your page to fail validation, and can have negative effects when using JavaScript with them"

metal-gear-solid 2009-12-31 20:25:32

Answer 7

+1 A:

This post is just to add some more points to this interesting discussion ..

Its true that .. Id must have been unique and usage of 'duplicate IDs' must have been depreciated by browsers itself ..
But may be because these browsers want to make it more coder-friendly, don't seriously consider the "id" matter ..
So apart from javascript this mistake doesn't matter much to us too ...
(Depends on the version of the different browsers) Even CSS has no problem with it .. (apart from validation errors) check this out ..

<head>
<style type="text/css">
  #Button{color:red;}
</style>
</head>
<body>
<form>
<input id="Button" type="button" value="Click me"/>
<input id="Button" type="text" value="Type Here"/>
</form>
</body>

But I assure that in-case of javascript usage it is prone to hell of bugs .. Once I had faced this problem .. where I had used same name for ID as well as NAME .. !

:-)

infant programmer 2010-01-04 11:28:13

"Even CSS has no problem with it" in your particular version of your particular browser.

Nicolás 2010-01-04 23:53:05

@Nicolas:: ohk .. clarified ..

infant programmer 2010-01-05 04:28:54

ansaurus

tags:

views:

answers:

What practical problem will i face if i use same #id more than one time on a page , other than validation error "ID is already defined"?

related questions