+ Start a Discussion
HNT_NeoHNT_Neo 

Lightning Component Error in $A.getCallback() [Cannot read property 'style' of null]

Hello outhere!

Looking for some help with this js controller that is giving me the following error (attached a full image of the component error too):

Uncaught Error in $A.getCalleback() [Cannot read property 'style' of null]
It's referencing the JS controller as the culprit: floatingMarqueeHelper.js

The scrolling marquee does show up but I have to clear the error message out each time which isn't good practice. 

I will include all my component code below for any insights into this. 

Thanks!

floatingMarquee.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="intervalId" type="Integer" default="0"/>
    
    <div id="parentDIV" style="overflow:hidden">
        <p style="position:relative;" id="tofloat">
            <b><span style="color:red">Important Note : </span>
                Get it Done Today</b>
        </p>
    </div>
</aura:component>



floatingMarqueeController.js
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="intervalId" type="Integer" default="0"/>
    
    <div id="parentDIV" style="overflow:hidden">
        <p style="position:relative;" id="tofloat">
            <b><span style="color:red">Important Note : </span>
                Get it Done Today</b>
        </p>
    </div>
</aura:component>


floatingMarquee.css
.THIS#parentDIV{
    font-size: 1rem;
    background: white;
    background-clip: padding-box;
    height: 50px;
    margin: 0px;
    padding: 1rem;
}


floatingMargueeHelper.js
({
    shiftDiv: function(component, event,lWidth) {
        var changeposition = component.get("v.intervalId");
        var floatElement = document.getElementById('tofloat');	  
        if(changeposition < lWidth){
            floatElement.style.left = changeposition+'px';
            changeposition = changeposition + 5;
            component.set("v.intervalId",changeposition);
        }
       
        else{
            component.set("v.intervalId",0);  //reset left to 0
            floatElement.style.left = "0px";
            changeposition = component.get("v.intervalId"); //resets to trigger the IF block, similar to a loop
        }
    }
})
 



 

Best Answer chosen by HNT_Neo
HNT_NeoHNT_Neo
I ended up ditching the component all together and replacing with a css scroll component. Thank you all for your input on this though. 

All Answers

HNT_NeoHNT_Neo
User-added image
Raj VakatiRaj Vakati
Two changes you need to make it 

1 . You are not suppose to use document.getElementById insted use component.find('tofloat')
2 .Set the Styles by Using 
 var cmpTarget = cmp.find('changeIt');
            $A.util.addClass(cmpTarget, 'Change');
 
({
    shiftDiv: function(component, event,lWidth) {
        var changeposition = component.get("v.intervalId");
        var floatElement = component.find('tofloat');	  
        if(changeposition < lWidth){
            var cmpTarget = cmp.find('changeIt');
            $A.util.addClass(cmpTarget, 'Change');
            
            changeposition = changeposition + 5;
            component.set("v.intervalId",changeposition);
        }
        
        else{
            component.set("v.intervalId",0);  //reset left to 0
            floatElement.style.left = "0px";
            changeposition = component.get("v.intervalId"); //resets to trigger the IF block, similar to a loop
        }
    }
})

 
 
Maharajan CMaharajan C
Hi JH,

I have tested the below code it's working fine to me.

====================================

Component :  floatingMarquee.cmp


<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="intervalId" type="Integer" default="0"/>
    
    <div id="parentDIV" style="overflow:hidden">
        <p style="position:relative;" id="tofloat">
            <b><span style="color:red">Important Note : </span>
                Get it Done Today</b>
        </p>
    </div>
</aura:component>

====================================

Controller :     floatingMarqueeController.js​

 ({
    doInit : function(component, event, helper) {
        var lWidth = window.innerWidth ;//Get the window's width
        //The setInterval() method calls a function or 
        //evaluates an expression at specified intervals (in milliseconds).
        window.setInterval($A.getCallback(function() { 
            helper.shiftDiv(component, event,lWidth);
        } ), 100);    
    },
})   

==================================

Controller Helper :     floatingMargueeHelper.js

 ({ 
    shiftDiv: function(component, event,lWidth) {
        var changeposition = component.get("v.intervalId");
        var floatElement = document.getElementById('tofloat');      
        if(changeposition < lWidth){
            floatElement.style.left = changeposition+'px';
            changeposition = changeposition + 5;
            component.set("v.intervalId",changeposition);
        }
       
        else{
            component.set("v.intervalId",0);  //reset left to 0
            floatElement.style.left = "0px";
            changeposition = component.get("v.intervalId"); //resets to trigger the IF block, similar to a loop
        }
    }
})   

=================================

CSS :      floatingMarquee.css​


.THIS#parentDIV{
    font-size: 1rem;
    background: white;
    background-clip: padding-box;
    height: 50px;
    margin: 0px;
    padding: 1rem;
}


Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!​


Thanks,
Raj
HNT_NeoHNT_Neo
Sorry gents, the issue didn't go away, unfortunately. 

Checking in Google Inspector and I see this error: 

error in Google inspector

This is the error showing up on the front end. 

Lightning Component Error Message

Let me know what else I can provide as I'm trying to figure this out too. 

Any help is greatly appreciated. 

Thanks!
HNT_NeoHNT_Neo
I ended up ditching the component all together and replacing with a css scroll component. Thank you all for your input on this though. 
This was selected as the best answer