Error -[Cannot read property 'style' of null]

Question

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}

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;
}

Answer 1

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.

Answer 2

With locker service, you should not use the getElementById() method from the controller or helper. you should only do so from a custom renderer when the DOM is in the same namespace.

feel free to check DOM Access Containment for accessing elements in your component.

Valid DOM Access

The following methods are valid DOM access because the elements are created by c:domLocker.

• cmp.getElements()

Returns the elements in the DOM rendered by the component.

• cmp.find()

Returns the div and button components, identified by their aura:id attributes.

• cmp.find("div1").getElement()

Returns the DOM element for the div as c:domLocker created the div.

• event.getSource().get("v.name")

Returns the name of the button that dispatched the event; in this case, myButton.

Example console output: