1

I know that we cannot assign expressions to the aura : id. It should be hard coded string literal, as per the salesforce documentation. Also, we cannot use html Id, as document.getElementById is no more supported. I saw some posts related to this where it was suggested to dynamically create the component. But that go well with the below scenario. Is there any workaround for this ? Basically i have a checkbox and a text inside an iteration element, in a lightning component. when the checkbox is checked, i want to strike out the corresponding text. Below is the code snippet.

Component :

<aura:iteration items="{!v.somelist}" var="val"> 
   <input name="checkbox" type="checkbox" id="{!val.id}" onclick="{!c.somefunction}"/>
   <a id="{!val.id}"> some text </a>
</aura:iteration>

Controller :


somefunction: function(component, event, helper) {
    var id = event.target.id;
    // is there a way, i can get the anchor tag element and add the css 
    class strikeText to it ?    
}

CSS :


.THIS .strikeText{
    text-decoration:line-through; 
}

Appreciate any help on this.

  • This statement we cannot use html Id, as document.getElementById is no more supported is not true. you can use document.getElementById and other supported DOM API in Lightnig component. – Praveen Sep 12 '17 at 7:02
  • I get the undefined value when trying to access by document.getElementById. Post locker service, this does not seems to be working. – Yashmith Sep 12 '17 at 7:09
  • Just now checked in my dev org. document.getElementById() works for me with locker in place. – Praveen Sep 12 '17 at 7:19
  • Thats true Praveen, It does work. It was some problem with the id and i had to append another character to it, to get it work. Thanks. – Yashmith Sep 12 '17 at 10:04
2

You can add custom html attributes to your checkbox. For example:

<input name="checkbox" type="checkbox" onclick="{!c.somefunction}" 
 data-anchorId="{!val.Id}" />

Then in your controller, you can use the document.getElementById() Javascript function to find the anchor depending on your custom attribute:

var anchorId = event.target.getAttribute("data-anchorId");
var anchor = document.getElementById(anchorId);
anchor.className += " strikeText";
  • Thanks for your response Martin. The DOM which i get by event.target is the checkbox element. However, i need to add the css class to the anchor tag, which has the value "Some Text". Any suggestions on this ? – Yashmith Sep 12 '17 at 7:16
  • @Yashmith Sorry I didn't understand. I updated my answer. – Martin Lezer Sep 12 '17 at 7:23

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.