Question

I need to figure out if I can perform the same javascript action on two identical elements with the same ID.

I have a box that appears twice on the page with the same content:

<div class="my_box" id="23"> Some bit 23 </div>

<div class="my_box" id="23"> Some bit 23 </div>

Then I find that element: (or those?)

var my_box_find = document.getElementsByClassName('my_box');

and after some processing/calculations want to replace the innerHTML of /both/ boxes:

document.getElementById(my_box_find[i].id).innerHTML = 'New bit 23';

This is an extremely simplified example. But it works when the element I am trying to change appears only once. If it appears twice, only the first instance will be changed…

Thinking out loud: I supposed I could append the ID with some random number to make each box pseudo-unique… but then this will do the calculations twice unnecessarily… I want them both to update at the same time with the same information.

Answer 1

IDs must be unique in a page. It is invalid to have non-unique element ids.

If you want to operate on multiple elements, assign a class to each element and loop through the selected results. A class may be used multiple times, and an element may be assigned multiple classes.

var els = document.getElementsByClassName('my_box');
for (var i = 0; i < els.length; i++) els[i].innerHTML = 'New bit 23';

Or, with jQuery:

$('.my_box').html('New bit 23');