2

I am trying to get the attribute value of the element clicked in my javascript code but for some reason the value I am getting is undefined.

This is the code:

HTML:

<c:button buttonLabel="Skype" buttonClass="valmetSecondaryButton noMargin" id="I_WANT_THIS_VALUE" onclick="{!c.openSkype}"/>

JS:

console.log(event.currentTarget.id);

This is working on Internet Explorer, havent tested in Firefox, but not working in Chrome. Also just so you know I am using Lightening Component, Salesforce!

Mizlul
  • 1
  • 7
  • 41
  • 100
  • 1
    Something like this asked before: https://stackoverflow.com/questions/32456290/event-target-id-vs-event-currenttarget-id-vs-this-id Thanks – Kapil Yadav Jan 25 '18 at 09:50
  • @kapilyadav i tried that link, no success, could you show me with a code or smth how do I get fixed this, I understood that in my case i am applying event bubbling but I dont know how can I make such that when the button is clicked stop it there and return id attribute of this button! – Mizlul Jan 25 '18 at 13:32

2 Answers2

2

Although not directly related to salesforce-lightning as your question is tagged, this thread is the first result when searching for evt currentTarget undefined so i'll leave my general answer here:

I've encountered a weird issue where event.currentTarget was undefined when it definitely shouldn't be - and it even appeared to be defined at the start of the event handler, but just disappear later.

It turns out that evt.currentTarget may disappear from the event when execution is passed on from the event - for example when awaiting a network request or trying to access the event from a setTimeout.

From MDN docs:

Note: The value of event.currentTarget is only available while the event is being handled. If you console.log() the event object, storing it in a variable, and then look for the currentTarget key in the console, its value will be null.

This can also be demonstrated with the following code at the top of the event handler:

console.log(e.currentTarget);
setTimeout(()=> console.log(e.currentTarget), 0);

If you want to run some async actions before using event.currentTarget, you can probably just save the value of event.currentTarget into a variable before the async actions, and then later use the variable.

let elem = event.currentTarget;
await doSomethingAsync();
console.log(elem);
leumasme
  • 376
  • 4
  • 19
0

Problem solved:

<span id="{!v.teamMember.email}" onclick="{!c.openSkype}">
                        <c:button buttonLabel="Skype" buttonClass="valmetSecondaryButton noMargin"/>
</span>

Thanks you all for your interest on solving this!

This link helped me solve the problem: https://salesforce.stackexchange.com/questions/160830/lighting-component-get-html-button-id-in-controller-js-working-in-firefox-not

Event Bubbling

Mizlul
  • 1
  • 7
  • 41
  • 100