Error: Cannot read property 'style' of null — как решить эту проблему?

Question

[rukzen]

Начнём с того что я полный 0 в JS и сейчас только начал учиться что то создавать.

Делаю небольшой сайтик, в котором при нажатии на одну кнопку, показывалось одно меню, а при нажатии нажатии на другую, так же показывалась другая графа меню.
Оба меню первоначально спрятаны.

Скопировал на этом сайте код, всё вроде б настроил, но всё же мне пишет ошибку NULL (Error: Cannot read property 'style' of null)

Понимаю что вопрос очень простой для людей разбирающихся в данной тематике. Но почему то в этом мне не помогает гугл )))

var popup = document.querySelector('.popup');
var open = document.querySelector('.open');

popup.style.display = 'none';

var popup2 = document.querySelector('.popup2');
var open2 = document.querySelector('.open2');

popup2.style.display = 'none';


open.addEventListener("click",      function() {

    if(popup.style.display == 'none')  popup.style.display = 'block';
    else popup.style.display = 'none';
    
  });
  
open2.addEventListener("click", function() {
    
    if(popup2.style.display == 'none')  popup2.style.display = 'block';
    else popup2.style.display = 'none';
    
  });

Можете подсказать как её исправить.

Answer 1

[Rsa97]

Какая-то из переменных popup или popup2 равняется null.
Это произойдёт, если querySelector не нашла элемента по заданному селектору.
Значит на момент вызова querySelector в DOM отсутствовал элемент с классом popup или popup2.
По хорошему, такую инициализацию JS надо проводить после загрузки всего документа, то есть по событию DOMContentLoaded.

Answer 2

[Beercokol]

У тебя есть элементы на странице с классом popup?

Comments

[rukzen]

<div action="#" class="popup">
<div class="janref">
Жанр 1
<input name="cat" value="2" type="checkbox"> 21312
<input name="cat" value="5" type="checkbox"> 12312
<input name="cat" value="12" type="checkbox"> 12321
</div>
</div>

<div action="#" class="popup2">
<div class="janref">
Жанр 2
<input name="cat" value="2" type="checkbox"> 12312
<input name="cat" value="5" type="checkbox"> 1232
<input name="cat" value="12" type="checkbox"> 1232
</div>
</div>

[rukzen]

и кнопки сверху

<button class="open">Сериалы</button>
    <button class="open2">Фильмы</button>

Answer 3

[3rr0r]

У меня была такая же проблема. Я решил её перестановкой скрипта с кодом из head в самый низ body.