How to get id of pug mixin into a javascript function with inline onclick

I am trying to make a mixin where multiple counters can be added with different element ids. I have tried a number of things and the closest working example I got is this.

mixin counter(count, id)
  h2(id=id)= count
  button(onclick="addId(1, this.textContent)")= id
  button(onclick ="addId(-1, this.textContent)")= id
    function addId(x,y){
      let element = document.getElementById(y);
      let content = element.textContent;
      element.textContent = Number(content) + x;

Then I add the mixins using

+counter(0, 'idToAdd')

This works but the issue is the buttons values have to be the id value passed in. I want the one button to be Add and the other Subtract. But everything I have tried has failed. Only by using


on the button am I able to pass the id in and then it works. So what I want to do is pass the id of the display element into the inline onclick without using this.textContent so I can name the buttons appropriately.

I have tried




and even


But nothing seems to work.

Please help.

Thank you

Read more here:

Content Attribution

This content was originally published by Ryan Els at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: