Add multiple ids in getElementById

Question

How to use this script with multiple ids? Does not work on the second id that I try to add

<script type="text/javascript">
window.onload = (function () {
var elem = document.getElementById("id1","id2").onclick = function()
{
fbq('track', 'InitiateCheckout');
}
});
</script>

score 11 · Accepted Answer · answered Nov 19 '15 at 08:36

11

You can use querySelectorAll to select many items by their IDs:

var items = document.querySelectorAll('#id2, #id3, #id5');

for (var i = 0; i < items.length; i++)
{
  items[i].onclick = function() { 
    this.innerText = this.innerText + '!';
  };
}

2, 3, 5 are working:

<p id="id1">I am 1</p><p id="id2">I am 2</p><p id="id3">I am 3</p><p id="id4">I am 4</p><p id="id5">I am 5</p>

However, creating a common class sounds much better.

answered Nov 19 '15 at 08:36

Yeldar Kurmangaliyev

33,467
12
59
101

this solved my problem perfectly! – Shemang David Jan 10 '20 at 15:18

andyrandy · Answer 2 · 2015-11-19T08:58:30.963

4

getElementById only takes one ID, but you can do this to select more than one element:

document.querySelectorAll('#id1, #id2');

...but you should not use that to create an event listener for every element. Better create one event listener for the whole document instead, for example:

document.addEventListener('click', handleClickEvents, false);

function handleClickEvents(evt) {
    myEventTarget = event.target;

    if (myEventTarget.id === 'id1') {

    } else if (myEventTarget.id === 'id2) {

    }
}

...or even better, use a framework like React or Angular.

edited Nov 19 '15 at 08:58

answered Nov 19 '15 at 08:36

andyrandy

72,880
8
113
130

please comment a reason if you downvote something, i am happy to improve my answer. – andyrandy Nov 19 '15 at 08:41
The very first line of your code is wrong. – Andy Nov 19 '15 at 08:45
my bad, fixed it. of course you need hashtags for ids. – andyrandy Nov 19 '15 at 08:46

Christos · Answer 3 · 2015-11-19T08:38:43.460

The getElementById takes only one parameter, the id of the element you want to select. You can't pass to id more than one ids.

For more documentantion on this, please have a look here.

If you want to select multiple elements and attach to them the same event handler, you can use another approach.

First you have to add the same class to each of them, for instance js-classname.

Then you can select them using the method getElementsByClassName. This method will return to you an array like object containing all the elements with the class you specified.

If you need more information about this, please have a look here.

Add multiple ids in getElementById

3 Answers3

Linked