[SalesForce] Error -[Cannot read property ‘style’ of null]

Error ID: -270960303 This page has an error. You might just need to
refresh it. Error in $A.getCallback() [Cannot read property 'style' of
null] Failing descriptor: {c:CommunityBreakingNews}

enter image description here

Controller:

({
    doInit : function(component, event, helper) {
        //var lWidth = window.innerWidth ;
        var lWidth = 400;
        window.setInterval($A.getCallback(function() { 
            helper.handleScroll(component, event,lWidth);
        } ), 20);
    }
})

Helper:

({
    handleScroll: function(component, event,lWidth) {
        var changeposition = component.get("v.scrollInterval");
        var floatElement = document.getElementById('toScroll');   
        if(changeposition < lWidth){
            floatElement.style.left = changeposition+'px';
            changeposition = changeposition + 1;
            component.set("v.scrollInterval",changeposition);
        }
        else{
            component.set("v.scrollInterval",0);
            floatElement.style.left = "0px";
            changeposition = component.get("v.scrollInterval");
        }
    }
})

Style:

.THIS#scrollDIV{
    border: 5px solid;
    border-radius: 6px;
    background: beige;
    height: 50px;
    margin: 5px;
    padding: 2px;
}

Best Answer

Since your question has no actual question written in it, I'll take a guess at what you're asking for help with here.

Your helper JS is looking for an element with an id of toScroll

var floatElement = document.getElementById('toScroll');   
    if(changeposition < lWidth){
        floatElement.style.left = changeposition+'px';

However, based on your CSS, the id of that element is scrollDIV

Because floatElement is null, the above error is produced when you try to access style on it.

If you correct the Id of the element, your code may work correctly.

Related Topic