1

What I want to accomplish is to show 5 stars in each row of a table. The users then can rate each row separately using the stars. However I just cant find out how to target the stars using the controller.

This is what i have in a lightning component:

    <div aura:id="starsArea" onclick="{!c.rateArea}">
        <lightning:icon iconName="utility:favorite" size="xx-small"/>
        <lightning:icon iconName="utility:favorite" size="xx-small"/>
        <lightning:icon iconName="utility:favorite" size="xx-small"/>
        <lightning:icon iconName="utility:favorite" size="xx-small"/>
        <lightning:icon iconName="utility:favorite" size="xx-small"/>
    </div>

Controller code :

({
    rateArea : function(component, event, helper) {
        var element = event.target;
        var child = element.firstChild;
        console.log('child ' + child); // null
        console.log('target ' + element.nodeName); // div
    },
})

When I click a star the DIV wrapping the lightning:icons is targeted and if I count the children of a DIV nothing is to be found.

Appreciate any help!

4
  • Are you saying you want to capture the icon details in the JS?
    – Jayant Das
    May 16 '18 at 16:50
  • Yes. I want to be able to manipulate the icon. Imagine that u have 5 stars from left to right u want to color first three stars if the third star was clicked.
    – MarkoC
    May 16 '18 at 17:05
  • Have you tried putting an aura:id on respective icons and then fetch that in the JS using component.find('iconid') and see if that works?
    – Jayant Das
    May 16 '18 at 17:06
  • I added some details around how you can manipulate using aura:id. If that helps.
    – Jayant Das
    May 16 '18 at 17:10
1

If I understand your question, you want to get the details of the icon in your JS controller. Assuming that to be the case, you can use aura:id on each of your icons and then retrieve those in your JS function.

So your markup looks as below with each icon declared with a unique id:

<div aura:id="starsArea" onclick="{!c.rateArea}">
    <lightning:icon aura:id="icon1" iconName="utility:favorite" size="xx-small"/>
    // all other icons with unique aura:id...
</div>

Now in your JS controller, you can fetch the details as:

var icon1 = component.find("icon1"); 

// you can verify say the iconName as below
console.log(icon1.get("v.iconName");

// now let's say I want to change the icon type, I can set that right this way
icon1.set("v.iconName","utility:activity"); // this will change my icon on component.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.