Reputation: 432

JavaScript - having same ID for multiple DOM elements

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, compatibility etc.

Upvotes: 0

Answers (6)

TARKUS

Reputation: 2200

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 complicated, 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

}

Upvotes: 0

Larry K

Reputation: 49104

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

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.
If the values will only be used by Javascript, then use any non-reserved property name that you like. Eg category, group, etc.

Upvotes: 0

Jeff Wilbert

Reputation: 4520

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 come 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 come 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.

Upvotes: 0