Is multiple ids allowed in html and javascript?

Question

I have read this on the internet -

“id” is unique in a page and can only apply to at most one element

But If I use the selector in CSS it works on every element.

index.html

<button id="button1">Button 1</button>
<button id="button1">Button 2</button>
<button id="button1">Button 3</button>
<button id="button1">Button 4</button>

style.css

#button1{
  color: red;
}

output:

But js binds only the first one.

script.js

$('#button1').click((value) => {
  console.log("clicked");
});

Can anyone explain, Why this is happening? And how it works?

Just because it appears to work doesn't mean it's correct. IDs **must** be unique. End of question. — j08691, Jul 16 '20 at 15:11
For exactly the reason you have found. Although CSS *works*, JS doesn't...that's why IDs should only be used once. — Paulie_D, Jul 16 '20 at 15:12
Well, you could use `document.querySelectorAll("#button1")` or `$("[id=button1]")`, but that doesn't make a lot of sense. — Unmitigated, Jul 16 '20 at 15:15
@ThiagoBarcala That's asking if a single element can have multiple ids, not if multiple elements can have the same id. — Unmitigated, Jul 16 '20 at 15:17
No @ThiagoBarcala, in my case I have different elements with same ids. — Avadh Vashisth, Jul 16 '20 at 15:28
@j08691 If it appears to work, that means it's working. Which is conflicting my statement, that's why I have asked. — Avadh Vashisth, Jul 16 '20 at 15:30
This one is the same: https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page — Thiago Barcala, Jul 16 '20 at 15:44

score 0 · Answer 1 · answered Jul 16 '20 at 16:13

The short answer for computer language is : No. Multiple IDs are not allowed in html and javascript.

The long explanation for human language is: It's "allowed" in the sense that your software (VS Code, Dreamweaver, Notepad, whatever) allows you to type it. If you use IDs however you want, your code will eventually break.

A teacher of mine once put it this way: An ID is like the Highlander: There can be only one.

HTML

What makes attributes of type ID special is that no two such attributes can have the same value; whatever the document language, an ID attribute can be used to uniquely identify its element.

Source: https://www.w3.org/TR/CSS21/selector.html#id-selectors

JAVASCRIPT

The id attribute must be unique within a document.

Source: https://www.w3schools.com/jquery/sel_id.asp

Thanks! Samuel Martin – Avadh Vashisth Jul 16 '20 at 16:22 — Avadh Vashisth, Jul 16 '20 at 16:22

score 0 · Answer 2 · answered Jul 16 '20 at 16:55

0

Answering my own question after doing some research.

https://www.w3.org/TR/CSS21/selector.html%23id-selectors#id-selectors

The above documentation clearly mentions-

If an element has multiple ID attributes, all of them must be treated as IDs for that element for the purposes of the ID selector.

That means CSS will treat all of them equally.

But, JavaScript's Document.getElementById() handles it differently.

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

The above documentation clearly mentions-

Function returns an Element object describing the DOM element object matching the specified ID, or null if no matching element was found in the document.

That means only one element will be returned.

Conclusion- “id” should be unique on a page. but, the browser allows it because HTML is not a strict language.

answered Jul 16 '20 at 16:55

Avadh Vashisth

127
8

Actually, the quote from CSS 2.1 is about a single element having multiple ID attributes - something that can happen in XML, but not in HTML. And not about multiple elements having the same ID value. For that,we have to look in the [Selectors Level 4 spec](https://drafts.csswg.org/selectors-4/#id-selector), where it says "An ID selector represents an element instance that has an identifier that matches the identifier in the ID selector. (**It is possible in non-conforming documents for multiple elements to match a single ID selector.**)". – Alohci Jul 16 '20 at 19:46
You should also note that there are several other uses of IDs in HTML. All of them resolve to only the first element in tree order that matches the ID value. Selectors are the sole exception. – Alohci Jul 16 '20 at 19:53
Ohh Thanks, @Alohci. This is some good information. – Avadh Vashisth Jul 17 '20 at 06:37
1

Also, not all browsers will treat this error in the same way. Different browsers have different error handling! Like I said [elsewhere](https://stackoverflow.com/q/48240240/1016716): For example, css `#one:target {...}` with multiple IDs `"one"`. Some browsers will assign the styles only to the first element with the ID, others to all of them. Things like that. – Mr Lister Jul 17 '20 at 07:03
Okay, so every browser has its own compilers for CSS. Is that right? – Avadh Vashisth Jul 17 '20 at 07:23
I'm saying every browser has its own _error handling_. There are rules to what a html file should look like, and how the resulting page should display. So far so good, but for every possible way to to something right, there are infinite ways to do it wrong, and the rules cannot possibly cover every error you make. So the browsers are on their own there. – Mr Lister Jul 17 '20 at 17:52

score -1 · Answer 3 · edited Jul 16 '20 at 15:20

-1

ID's are unique for each element and same ID cannot be used on multiple elements. If you really want to do operations using a single block of code to different elements, try using classes

<button class="button"></button>
<button class="button"></button>
<button class="button"></button>

In css:

.button {
//css goes here
}

In javascript(jquery):

$('.button').onclick = ......

edited Jul 16 '20 at 15:20

VXp

11,598
6
31
46

answered Jul 16 '20 at 15:18

Croximo Crox

79
10

Is multiple ids allowed in html and javascript?

3 Answers3

Linked