Variable Undefined...But it Really Is

Question

I'm working in a Lightning Aura component, and when I run it in the browser it's saying that my element is undefined.

HTML

<div id="myElement">
    ...
</div>

Controller.js

doInit: function(component, event, helper) {
    helper.myFunction(component, event, helper);
}

Helper.js

myFunction: function(component, event, helper) {
    const myElement = document.getElementById("myElement");
    $A.util.addClass(myElement , "hello-world");
},

I've tried a variation by setting aura:id on the HTML element...

HTML

<div aura:id="myElement">
    ...
</div>

Helper.js

myFunction: function(component, event, helper) {
    const myElement = component.find("myElement").getElement();
    $A.util.addClass(myElement , "hello-world");
},

But the results are the same: myFunction still comes across as undefined.

Answer 1

Getting/using native element Id's is typically a bad idea with dynamic content in general. You are on the right track with setting the aura:id attribute, and using component.find(), but i think you are simply missing the following getElement() to get what you are looking for. Try setting your aura:id property again, and grab it in your controller using:

myElement = component.find("myElement").getElement();

Answer 2

You're apparently calling the method before the first render cycle. The init handler runs before the component is rendered. Alternatively, you're modifying an element that causes a re-render and you're not waiting for that cycle to finish. To prove that this should generally work, I wrote this code:

<aura:application extends="force:slds">
    <div aura:id="myElement">
        ...
    </div>
    <lightning:button onclick="{!c.myFunction}" label="Do it!" />
</aura:application>

....

({
    myFunction: function(component, event, helper) {
        const myElement = component.find("myElement");
        $A.util.addClass(myElement , "hello-world");
    }
})

....

.THIS.hello-world {
    background: black;
    color: white;
}

....

If you put this in to a Lightning Application, you'll see it works. Therefore, this is just a timing issue. Your code here is just fine, it's just when you're calling the method that's incorrect.