How to call a class function in html onclick

Question

i have multiple button created dynamically from DB which holds id and Value, i have called a class function through EventHandler which works only for the first button, How to call class functions from onclick

<button data-add-tab id="51200844-100-RP" value="data_source" onclick="chromeTabs.addTab({title: 'New Tab',this.id,this.value,favicon: false});">Add new tab</button>
 <button data-add-tab id="51200520-483-RP" value="data_source1" onclick="chromeTabs.addTab({title: 'New Tab',this.id,this.value,favicon: false});">Add new tab</button>
 <button data-add-tab id="51200884-103-RP" value="data_source2" onclick="chromeTabs.addTab({title: 'New Tab',this.id,this.value,favicon: false});">Add new tab</button>

here is my script which works on even handler

<script>
  var chromeTabs = new ChromeTabs()
  document.querySelector('button[data-add-tab]').addEventListener('click', _ => {
    chromeTabs.addTab({
      title: 'New Tab',
      id:_.target.id,
      value:_.target.value,
      favicon: false
    })
  })

can you please Help me Thanks.

`querySelector()` selects the *first* element matching the query string. Check out [`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), which returns *all* elements matching the query string. Note that you can't chain `.addEventListener` to this. You'll have to iterate and attach them one-by-one, or use *event delegation*. [More information...](https://stackoverflow.com/questions/21700364/javascript-adding-click-event-listener-to-class) — Tyler Roper, May 10 '19 at 03:49
Thanks for your answer, is its possible to call class function from onclick? — Yaseer Hussain, May 10 '19 at 03:51
Yes, but I question why you'd want to. Using inline `onclick` is **never** a good idea. — Tyler Roper, May 10 '19 at 03:53
but i can call through `onclick="call(this.id,this.value)"` in script as `function call(id,value){chromeTabs.addTab({val1,val2,val3val4}); }` is its possible to avoid call funtion > — Yaseer Hussain, May 10 '19 at 03:55
put your script inside a function, and try to call it using onclick="yourfunction()" — Nit, May 10 '19 at 03:55
@MrJ Yes. It's a [data attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). — Tyler Roper, May 10 '19 at 03:58
@MrJ I think that's actually worse. If the data attribute is being used as a flag (i.e. *"If this data attribute exists, do X"*) setting a value is misleading. — Tyler Roper, May 10 '19 at 04:01
i followed your first cooments post @TylerRoper but i could not understand can you please post your answer on your way ?, Many thanks — Yaseer Hussain, May 10 '19 at 04:02

score 2 · Accepted Answer · answered May 10 '19 at 04:09

Your event handler works only for the first button because .querySelector() returns only the first element matching the selector.

Instead, you can select all buttons matching the selector by using .querySelectorAll().

You can then use Array.from( ... ).forEach( ... ) to iterate through the buttons and attach the event handler to each individually.

<button data-add-tab id="51200844-100-RP" value="data_source">Add new tab</button>
<button data-add-tab id="51200520-483-RP" value="data_source1">Add new tab</button>
<button data-add-tab id="51200884-103-RP" value="data_source2">Add new tab</button>

const chromeTabs = new ChromeTabs();
const addTabButtons = document.querySelectorAll('button[data-add-tab]');

Array.from(addTabButtons).forEach(button => { //For each data-add-tab button

  button.addEventListener('click', _ => {     //Add a click handler
    chromeTabs.addTab({
      title: 'New Tab',
      id: _.target.id,
      value: _.target.value,
      favicon: false
    });
  });

});

this is working but the called function seems little modifications to slow down — Yaseer Hussain, May 10 '19 at 04:25

How to call a class function in html onclick

1 Answers1