将多个getElementById语句合并为一个

Question

I have a number of statement on a page that apply a click listener to a specific element identified with an ID. What would be the most efficient way to combine these into one statement?

document.getElementById("foo1").addEventListener("click", function(){doSomething('bar1')});
document.getElementById("foo2").addEventListener("click", function(){doSomething('bar2')});
document.getElementById("foo3").addEventListener("click", function(){doSomething('bar3')});

Answer 1

You can write a wrapper that takes the id and the callback for the event listener and do something like this:

function addListenerToId(elemId, cb) {
    document.getElementById(elemId).addEventListener("click", cb);
}

And then:

addListenerToId('foo1', cb1);
addListenerToId('foo2', cb2);
addListenerToId('foo3', cb3);

Answer 2

Since the "foo" and "bar" are the same and all that changes is the number, we could just put it in a for loop!

for(var i=1;i<=3;i++){
document.getElementById("foo"+i).addEventListener("click", function()
{doSomething('bar'+i)});
}

If you can't just do it with I as a number, you could make it a string first using the .toString() method. Hope this helps!

Answer 3

Make a for loop that iterates from 1 to the max number and when you use the id just add i to foo or bar :

for(let i = 1; i <= 3; i++)
{
    document.getElementById("foo" + i).addEventListener("click", function(){doSomething('bar' + id)});
}

Also if you only need to select all elements with id starting with foo for example you can use:

document.querySelectorAll("[id^='foo']").forEach((e) => {  
  e.addEventListener('click', doSomething);
});

Answer 4

You can use data-attributes to store the text and bind the click event to every element.

This is an example using a elements.

 function doSomething(e) { e.preventDefault(); console.log(this.dataset.text); }; document.querySelectorAll('a').forEach((e) => { e.addEventListener('click', doSomething); }); 

 <a href="#" id="foo1" data-text="bar1">Foo1</a> <a href="#" id="foo2" data-text="bar2">Foo2</a> <a href="#" id="foo3" data-text="bar3">Foo3</a>