how to get Id of the anchor tag from where the js method got called LWC

Question

I'm trying to access the id assigned to the tag where where I'm calling the js method.

<ul>
                    <template for:each={errorList} for:item='objError'>
                        <li key={objError.Id}>
                            <a id={objError.Id} type={objError.type} class="slds-text-link_reset" onclick={handleErrorClick}>
                            <lightning-icon icon-name="utility:jump_to_bottom" size="xx-small" class="slds-p-right_small" alternative-text={objError.error}></lightning-icon>
                            {objError.error}
                            </a>
                        </li>
                    </template>
                </ul>

JS :

handleErrorClick(event){
        /* eslint-disable no-console */
        console.log('event : ' ,event.target.Id);
}

How can I get the value held in the Id attribute.

Answer 1

You did not shared what is not working - but my guess is that you don`t get a value?

1. the attribute is called id - not Id
2. lighnting-icon is a child of your link and can therefore be the event target - but it has no id attribute
3. Salesforce recommends to not use id atrributes as they are modified by the framework (and i guess you want to use it to lookup the item in your list) - you should you use an alternative like a data attribute

Here is an example which uses a data attribute and css in order to prevent fireing the event from the lightning-icon element:

https://developer.salesforce.com/docs/component-library/tools/playground/TDY87YRRd/1/edit

Answer 2

You cannot use Id in LWC as they are modified at runtime by framework. Instead use some other attributes (preferably data- attributes) for identification.

Here is the detailed explanation: https://salesforcesas.home.blog/2019/07/16/lwc-selectors-identification-of-elements/