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('dealsButton_2').onclick = one;
//I  want the above 2 lines of code reduced to one.

A single function for on click on 'dealsButton_*' patterned id elements. How can I do this. The elements are dynamically loaded.

If `one` and `two` do the same thing, why have to functions? — PeterMader, Aug 18 '17 at 09:38
Use event delegation to a static parent element, check the id property of the target element and then call the appropriate function if they match — Patrick Evans, Aug 18 '17 at 09:40
Sorry, I am a beginner, could you please share me some links to refer how to do this? — Anoop Mayampilly Muraleedharan, Aug 18 '17 at 09:42
@PatrickEvans You can post the answer, this would be the most optimal solution. Both current answers really miss "The elements are dynamically loaded." even though it's in bold. — dfsq, Aug 18 '17 at 09:44
@dfsq, actually I was sure there was a duplicate of this somewhere, so left that comment till I could find it. Closest I found so far is [this one](https://stackoverflow.com/questions/1388018/attaching-an-event-to-multiple-elements-at-one-go) but all answers are jQuery and doesnt address the dynamic part. Or even [this one](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Patrick Evans, Aug 18 '17 at 09:47

kukkuz · Accepted Answer · 2017-08-18T09:50:33.463

4

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);
});

<div id="dealsButton_1">one</div>
<div id="dealsButton_2">two</div>

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 = `<div id="dealsButton_1">one</div>
<div id="dealsButton_2">two</div>`;

edited Aug 18 '17 at 09:50

answered Aug 18 '17 at 09:40

kukkuz

41,512
6
59
95

1

I think your answer still misses the most important nuance: *"The elements are dynamically loaded."* – dfsq Aug 18 '17 at 09:45
1

Without a Regexp: `if (e.target && e.target.matches('[id^=dealsButton_]') { ... }` – PeterMader Aug 18 '17 at 09:53

score 0 · Answer 2 · answered Aug 18 '17 at 09:42

0

Are you looking for something like this:

function onClick(){
  //single handler
}

$('[id*="dealsbutton_"]').click(onClick)

answered Aug 18 '17 at 09:42

Santiago Benitez

364
2
12

score 0 · Answer 3 · answered Aug 18 '17 at 09:50

Here is a solution where you can choose ID name as u wish without a specific pattern of name.

<html>
  <body>
    <div id="abc">one</div>
    <div id="def">two</div>

    <script type="text/javascript">
      function one() {
       console.log("hai");
      }

      function addOnclickFunc (func, idArray){
        idArray.forEach(function(element) {
          document.getElementById(element).onclick = func;
        })
      }

      addOnclickFunc(one,["abc","def"])
    </script>
  </body>
</html>

score -1 · Answer 4 · answered Aug 18 '17 at 09:54

you use jQuery with regex for this

$.each( $("button[id^='dealsButton_']"), function () {
 $(this).on('click', function(){
  //code here
 })
});

if want to make the function call names dynamically. pass it as data attribute to button element and call it using eval function

<button id="dealButton_1" data-click="one"></button>

$.each( $("button[id^='dealsButton_']"), function () {
 $(this).on('click', function(){
   var function_call = $(this).attr('data-click')
   eval(function_call)
 })
});

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

4 Answers4

Linked

Related