0

Я написал код который изменяет цвет меню в зависимости от позиции на странице

window.onscroll = function() {
    var BlockName = document.location.hash;//Берет #... адреса
    var AllBlock = ["#Intro" , "#whatWeDo" , "#workProcess" , "#whyUs" , "#Prices" , "#Order"]; // Все #... страницы
    var ClassBlockName = ["Intro_2" , "whatWeDo_2" , "workProcess_2" , "whyUs_2" , "Prices_2" , "Order_2"]; // id объектов которым необходимо менять цвет
    for(var i = 0; i<6; i++) { 
        var Block = "'"+ClassBlockName[i]+"'"; // Присваиваем текущий id после чего...
        if (BlockName == AllBlock[i]) { // Проверяем равен он(его позиция) #...
            document.getElementById(Block).style.color = '#f3a7f6'; // Истина меняем цвет на ...
        }
        else{ // Если хеш на равен меня цвет на белый(всем id кроме одного)
            var Dis = "'"+ClassBlockName[i]+"'";
            document.getElementById(Dis).style.color = '#fff';
        }
    }
}

Код работает пока я не добавляю:

else{
    var Dis = "'"+ClassBlockName[i]+"'";
    document.getElementById(Dis).style.color = '#fff';
}

После чего выдает ошибку

index.html:352 Uncaught TypeError: Cannot read property 'style' of null

<div class="header-menu">
    <a class="header-menu__link" data-menuanchor="what-we-do" href="#whatWeDo" id="whatWeDo_2">
        <div class="box_1"></div><div class="header-menu__text">Чем мы занимаемся?</div>
    </a>
    <a class="header-menu__link" data-menuanchor="work-process" href="#workProcess" id="workProcess_2">
        <div class="header-menu__text">Процесс работы</div>
    </a>
    <a class="header-menu__link" data-menuanchor="why-us" href="#whyUs" id="whyUs_2">
        <div class="header-menu__text">Почему именно мы?</div>
    </a>
    <a class="header-menu__link" data-menuanchor="prices" href="#Prices" id="Prices_2">
        <div class="header-menu__text">Прайс</div>
    </a>
    <a class="header-menu__link header-menu__link_order" data-menuanchor="order" href="#Order" id="Order_2">
        <div class="header-menu__text">Сделать заказ</div>
    </a>
3
  • 1
    в предоставленной разметке отсутствует элемент с id="Intro_2" - поэтому при попытке его получить - возвращается null
    – Grundy
    22 июл 2019 в 10:18
  • 1
    также следующая проверка бессмысленна: if (BlockName == AllBlock[i]) { // Проверяем равен он(его позиция) #... Так как в массивах разные значения, следовательно она всегда будет false возвращать
    – Grundy
    22 июл 2019 в 10:20
  • @Grundy Понял ошибку. Благодарю! 22 июл 2019 в 11:52

2 ответа 2

0
var Block = "'"+ClassBlockName[i]+"'";
var Dis = "'"+ClassBlockName[i]+"'";

пробуйте заменить на:

var Block = ClassBlockName[i];
var Dis = ClassBlockName[i];

и если можно пример залить на тот же CodePen, для ясности. Данная ошибка говорит вам что свойства style у объекта null нет.

1
0

Следующая проверка бессмысленна,

if (BlockName == AllBlock[i])

так как в массивах разные значения, следовательно она всегда будет возвращать false.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.