Почему скрипт не находит элемент по id в Joomla?

Question

[Андрей]

Есть скрипт и он работает, но в joomla почему то не находит элемент по id. По классам и тегам элементы определяются. Эта строчка console.log(document.getElementById('arrowRight')); выводит null.

Answer 1

[Kirill]

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

Comments

[Андрей]

элемент статичный. Есть слайдер с стрелками, которым им присвоены id, по нажатию на кнопку слайдер передвигается, но этого не происходит.

[Kirill]

Андрей, Сложно сказать без фрагментов кода

[Андрей]

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

[Kirill]

Андрей, скрипт то понятно, а верстку?

[Андрей]

<div class="slider">
            <div id="arrowLeft"><img src="/templates/ipsystem/img/arrowLeft.png" alt=""></div>
            <div class="sliderWrap">            
                <div id="sliderLine">
                    <div class="sliderItem">
                        <div class="window"></div>
                        <div class="description">
                            <p><b>Гостинная с подсветкой 24м2</b> <br>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.</p>
                            <div class="price"> <b>Стоимость:</b> <span class="blueFont">1500 р.</span> <button class="yellowBtn">ХОЧУ ТАКОЙ ЖЕ</button></div>
                        </div>
                        <div class="photoLine" n="0">
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                        </div>
                    </div>
                    <div class="sliderItem">                    
                        <div class="window"></div>
                        <div class="description">
                            <p><b>Гостинная с подсветкой 24м2</b> <br>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.</p>
                            <div class="price"><b>Стоимость:</b> <span class="blueFont">1500 р.</span> <button class="yellowBtn">ХОЧУ ТАКОЙ ЖЕ</button></div>
                        </div>
                        <div class="photoLine" n="1">                        
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                        </div>
                    </div>
                    <div class="sliderItem">                    
                        <div class="window"></div>
                        <div class="description">
                            <p><b>Гостинная с подсветкой 24м2</b> <br>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.</p>
                            <div class="price">Стоимость: <span class="blueFont">1500 р.</span> <button class="yellowBtn">ХОЧУ ТАКОЙ ЖЕ</button></div>
                        </div>
                        <div class="photoLine" n="2">
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                            <div class="sample"><i class="fa fa-youtube-play fa-3x"></i></div>
                        </div>
                    </div>
                </div>                
            </div>
            <div id="arrowRight"><img src="/templates/ipsystem/img/arrowLeft.png" alt="" onclick=""></div>
        </div>

[Kirill]

Андрей, подождите, а вы обернули скрипт в document.addEventListener('DOMContentLoaded', () => {}); ? Без этого он и не увидит эти элементы

[Андрей]

Спасибо! Работает! Просто с joomla вчера познакомился и всех нюансов не знаю.

[Kirill]

Андрей, не могли вы бы отметить ответ как решение?

[Kirill]

Андрей, и, к слову, это не нюансы джумлы, это нюансы JS. Скрипту нужно подождать (DOMContentLoaded), пока загрузятся все элементы на странице и только потом их можно будет выбрать