single onclick function for buttons with a similar id pattern - JavaScript

Question

I want to reduce the code.

function one() {
 console.log(\"hai\");
}

document.getElementById(\'dealsButton_1\').onclick = one;
document.getElementById(\'dealsBu         


        

Answer 1

You can use querySelectorAll and the selector [id^=dealsButton_] to add the event listener in a single line - see demo below:

function one() {
 console.log("hai");
}

Array.prototype.forEach.call(
  document.querySelectorAll('[id^=dealsButton_]'), function(e) {
  e.addEventListener('click', one);
});

one
two

If the markup is dynamically loaded you can base it on a static element like this:

function one() {
  console.log("hai");
}

document.addEventListener('click', function(e) {
  if (e.target && /^dealsButton_/.test(e.target.id))
    one();
})

// dynamically add
document.body.innerHTML = `
one
two
`;