Как разобраться с ошибкой addEventListener?

Question

[Happymalina]

Ребят, помогите пожалуйста разобраться с ошибкой , изучаю сама Javascript, поэтому могу чего-то пока не знать. Задание простое, нужно сделать чтобы по клику кнопки, появлялась форма. В консоли если выводить код - принимает, подсвечивает голубым, но форма не появляется, после этого нажимаю на кнопку, только тогда форма появляется. После обновления страницы и нажатия на кнопку "Напишите нам", форма опять не появляется, а в консоли ошибка "

Uncaught TypeError: Cannot read property 'addEventListener' of null.

Вот код скрипта:

var link = document.querySelector('.btn-map');
var popup = document.querySelector('.popup-form-order');

link.addEventListener("click", function(event) {
    popup.classList.add('form-popup-show');
    }, false);

код элемента:

<div class="map-contacts">
          <div class="map-title"><span>NЁRDS</span> Design Studio</div>
         <div class="map-address">350000, Краснодар, ул.Головатого, 100</div>
         <div class="map-phone">тел. <a href="tel:[phone]">[phone]</a></div>
         <a href="#" class="btn-map" >Напишите нам</a>
</div>

Comments

[aen]

Лучше выложите полностью весь пример куда-нибудь, например на jsbin.com

Answer 1

[Сергей Мельников]

На момент отработки js элемента '.btn-map' еще нет.
Подключайте скрипты в конце тега body

Comments

[Happymalina]

СЕРГЕЙ! Спасибо Вам огромное! я ведь столько раз слышала про это, теперь работает!)) а Скажите пожалуйста, те скрипты в которых Jquery подключаем тоже в низ лучше переносить тогда?

[Пауло Мадроньеро]

Happymalina: Те скрипты должны обязательно быть после подключения jQuery. Как вариант можете добавить атрибут "defer" в тег

[Сергей Мельников]

Happymalina: по правилу хорошего тона, все скрипты должны подключатся в конце тега body, дабы загрузка скриптов не тормозила отрисовку страницы

[Happymalina]

Поняла, спасибо большое за ответы!