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.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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