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(), 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... — Tyler Roper
– Tyler Roper, Commented May 10, 2019 at 3:49
Thanks for your answer, is its possible to call class function from onclick? — Yaseer Hussain
– Yaseer Hussain, Commented May 10, 2019 at 3:51
Yes, but I question why you'd want to. Using inline onclick is never a good idea. — Tyler Roper
– Tyler Roper, Commented May 10, 2019 at 3: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
– Yaseer Hussain, Commented May 10, 2019 at 3:55
put your script inside a function, and try to call it using onclick="yourfunction()" — Nit
– Nit, Commented May 10, 2019 at 3:55

Tyler Roper · Accepted Answer · 2019-05-10 04:09:24Z

2

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

});

answered May 10, 2019 at 4:09

Tyler Roper

21.7k6 gold badges35 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yaseer Hussain Over a year ago

this is working but the called function seems little modifications to slow down

Collectives™ on Stack Overflow

How to call a class function in html onclick

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related