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
  script.
    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

this.textContent 

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

#{id}

and

!{id}

and even

`${id}`

But nothing seems to work.

Please help.

Thank you

28 thoughts on “How to get id of pug mixin into a javascript function with inline onclick”

  1. 71757 527532Thanks for some other great post. Exactly where else may just anyone get that type of info in such an ideal indicates of writing? Ive a presentation next week, and Im at the search for such information. 67457

    Reply

Leave a Comment