Why does the script not find the element by id in Joomla?

Question

JavaScript

There is a script and it works, but in joomla for some reason it does not find the element by id. Elements are defined by classes and tags. This line console.log(document.getElementById('arrowRight')); outputs null.

Answer 1

document.addEventListener('DOMContentLoaded', function() {
    var Left = document.getElementById('arrowLeft'),
    Right = document.getElementById('arrowRight'),
    sliderLine = document.getElementById('sliderLine'),
    sliderItem = document.getElementsByClassName('sliderItem')[0],
    left = 0;

    function arrowLeft(){
        console.log(sliderItem);
        widthSliderItem = sliderItem.offsetWidth;
        left = left - widthSliderItem;
        if(left >= -2*widthSliderItem){
            sliderLine.style.left =  left + 'px';
        }else{
            sliderLine.style.left = 0 + 'px';
            left = 0;
        }
    }
    function arrowRight(){
        left = left + 950;
        if(left <= 0){        
            sliderLine.style.left = left + 'px';
        }else{
            left = 0;
        }
    }
});