Get button name or Id in LWC?

Question

Looking to identify which button was pressed through name or id as there are three buttons in my LWC that each trigger the same function.

I've used a standard html button so i could style it in a specific way (instead of lightning-button).

Button:

<button class="form-help-button" aria-describedby="help" id="BussNameButton" onclick={revealHelp}> 

Some of the documentation showed the standard event being used with standard html elements (ie. event.target.name etc.). So that is what I tried by I have not had success:

revealHelp(event) {
   let id = event.target.id;

   console.log(id)
}

It is firing but id is undefined each time. Can i retrieve the id or name of a standard html button in lwc?

In this Stack Exchange thread, most solutions involve passing an attribute in the element which is not allowed in LWC

Answer 1

id shouldn't be used, because it is used by the framework for rendering purposes. Instead, just use a data attribute to specify the name:

<button data-name="myButtonName" ... />

...

onClickHandler(event) {
    var buttonName = event.target.dataset.name;
    ...

...

Edit: I also created a quick playground that demonstrates this.

Answer 2

event.currentTarget.id or event.currentTarget.name is the correct syntax, i was just off on that part. Also use name not Id as it was coming across with appended numbers (many others mention this as well)