Возникает очень много ошибок Uncaught TypeError: Cannot set property 'className' of undefined at HTMLDocument.document.onscroll

192

22 мая 2018, 17:40

Вот js для смены класса про скролле.

<script>
document.onscroll = function (event) {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    console.log(scrollTop);
    if(scrollTop > 300) {
        var el = document.getElementsByClassName('menu-mp')[0];
        el.className = 'menu-mp2';
    }
    else if(scrollTop < 300) {
        var el = document.getElementsByClassName('menu-mp2')[0];
        el.className = 'menu-mp';
    }
}

Но при прокрутке возникает бесконечное количество ошибок. Ругается на строчку

el.className = 'menu-mp2'

и на строчку

el.className = 'menu-mp';

Answer 1

Потому, что document.getElementsByClassName('menu-mp') возращает пустой массив. То есть не найден элемент с классом menu-mp. Далее вы из пустого массива берёте первый элемент и получаете undefined, вместо HTMLElement. Потом пытаетесь в undefined в свойство className что-то присвоить. В итоге возникает эта ошибка.

Answer 2

В итоге работает без проблем вот такой код. Надеюсь кому-то пригодится!

jQuery(document).ready(function($) {
//caches a jQuery object containing the header element
var header = $(".menu-mp");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 300) {
        header.removeClass('menu-mp').addClass("menu-mp2");
    } else {
        header.removeClass("menu-mp2").addClass('menu-mp');
    }
});
});