Почему не заработал javascript при добавлении формы на сайте wordpress?

Question

[Евгений Попов]

Доброго времени суток.
Вот ссылка на страничку http://research.h1n.ru/контакты/
html-часть я добавил в файлик page.php, скрипт в \js, стили в \css. Файлы стиля и javascript я записал в functions.php
В консоли написано такое: myform.js?ver=5.5.1:59 Uncaught TypeError: Cannot read property 'addEventListener' of null
at myform.js?ver=5.5.1:59
откуда добавляется номер версии?
А главное: почему скрипт не разворачивает форму? И что говорит консоль?
В codepen эти 3 файла работают.

Comments

[Павел Корнилов]

Консоль говорит, что addEventListener висит на несуществующем DOM-узле.
По ссылке вижу ошибку

Uncaught TypeError: openbutton is null

Что означает, что в переменную openbutton пытаются опять же загнать несуществующий узел.

Строка 58 myForm.js:

let openbutton = document.querySelector('.open-button');

Получает в переменную null.

[Евгений Попов]

Павел Корнилов, спасибо за комментарий. Поясните, пожалуйста, как это получилось с учетом того, что стиль кнопки "Перезвоните мне" описан классом .open-button в файле стилей myformstyle.css, а он загружен. Т.е. узел должен существовать.

[Павел Корнилов]

Евгений Попов, это может быть в том случае, когда обращение к селектору идет до того, как элемент будет отрисован на странице. Почитайте про DOMContentLoaded.

[Евгений Попов]

Тогда нужно все манипуляции с элементами объектной модели документа включить в скобки функции window.addEventListener("DOMContentLoaded", function() независимо от положения в скрипте?
Спасибо, заработало. Только почему-то мне не удалось обойтись одной записью window.addEventListener("DOMContentLoaded", function() . Для проблемного куска кода пришлось завести свою отдельную запись.

[Павел Корнилов]

Евгений Попов, тут я не могу так однозначно ответить. В принципе, такое нужно далеко не всегда. При синхронном выполнении кода достаточно поместить скрипт после html-кода, например. Но вы можете экспериментировать. Направление я постарался подсказать.
И, если будете отвечать, нажимайте кнопку Ответить перед постом. Иначе я просто могу не увидеть вашего ответа.

[Евгений Попов]

Павел Корнилов, спасибо

[Павел Корнилов]

Евгений Попов, рад был помочь.