If I assign the same id to multiple dom elements e.g.

txtBox.id="1"
txtBox2.id="1"

Are there any issues with this? Performance, patibility etc.

If I assign the same id to multiple dom elements e.g.

txtBox.id="1"
txtBox2.id="1"

Are there any issues with this? Performance, patibility etc.

• javascript

6 Answers 6

Yes. DO NOT DO THIS

IDs are meant to be unique.
Use a class if you want a few the same.

Also IDs should not start with a numeric value

There are two issues:

• id attributes must be unique within an HTML document,
• id attributes starting with a number are only supported in HTML5.

Yes there can be performance issues.

Use class if you are going to assign the same name to multiple elements.

id is suppose to represent a single unique element, if you need multiple elements to be identified through a single entity use class.

The performance impact will e in the form of when you run into unexpected problems with Javascript not working properly, CSS not applying properly, and so forth...

The problem using the same id will e when you use javascript like document.getElementById() the keyword there is element singular, it will only return 1 element, where's if they were classes you'd use document.getElementsByClassName() and return multiple elements plural with that class name.

Not a good idea. Dom id values should be unique.

Added Things will probably break in weird, browser-specific ways. (And there is already enough weird, browser-specific stuff, you don't want to add the opportunity for any more!)

Solutions

1. If you want the values settable from the markup too, then consider the DOM class of the element. Remember that an element can belong to multiple classes.

2. If the values will only be used by Javascript, then use any non-reserved property name that you like. Eg category, group, etc.

I agree with the other opinions that it isn't a good idea. However, you can effectively reference elements in an html page that have the same ids. I made a calendar-type table whose table id="week", and then there were lots of rows with their own ids, and then the TDs had their own ids like "m","t","w","th","s","su" and so forth and so on.

Then the client said he wanted to be able to look at the previous week calendar, and the next week calendar. So I wrote three identical tables on one page, and using a JQuery slider, you could slide the weeks back and forth. Then my JavaScript calculations stopped working, and I realized it was because each table had identical TR and TD ids.

So I started giving new unique ids for each TR and TD, appending the week id to the normal id, something like id="m_week0" or id="m_week-1" etc.

That seemed to be over plicated, because there were just too many elements with ids-per-table, so I rolled back that idea.

Instead, I referenced each id by associating it with its parent table, which had its own unique id: $("table[id='week0'] #m").html().

Now I can loop over each week, and get/set the values or inner html of each element, even if they have the same ids as TDs and TRs that occur in other tables:

var value = 1;
for(var week=-1;week<2;week++){
    $("table[id='week"+week+"'] #m").html() = value; // monday
    value++; //simple increment as an example

    $("table[id='week"+week+"'] #t").html() = value; //tuesday
    value++; //simple increment as an example

    $("table[id='week"+week+"'] #w").html() = value; //wednesday
    value++; //simple increment as an example

    $("table[id='week"+week+"'] #th").html() = value; //thursday
    value++; //simple increment as an example

    $("table[id='week"+week+"'] #f").html() = value;  //friday
    value++; //simple increment as an example

}