Почему не работает всплывашка, сам скрипт подключен в html перед закрывающим body?

Question

[Даниил Архипов]

Вот сам код https://codepen.io/sova_sova/pen/gOKjYYP

Comments

[Вадим]

А открыть консоль и почитать ошибки это сложно слишком?

Answer 1

[Вадим]

const openPopUp = document.getElementById('open_pop_up');

- id должен быть уникальным в рамках страницы. Не должно быть более одного элемента, с повторяющимся id. В итоге тут будет найден только первый в разметке элемент с таким id. То есть только первая кнопка "заказать" будет работать.

const closePopUp = document.getElementById('pop_up_close');

- не существует элемента с таким id. Есть с class.

const popUp = document.getElementById('pop_up'); - аналогично предыдущему.

<a class="table_box_button" href="#" class="open_pop_up">Заказать</a>

Это где Вы научились два раза один и тот же атрибут объявлять на элементе? Объединить в один.

Comments

[Даниил Архипов]

Хм, как тогда лучше переделать код?

[Вадим]

darkhipov2018, Что значит как?
Заменить селекторы по id на селекторы по классу. Лучше с помощью document.querySelectorAll('.classname')
И потом добавить элементам обработчики, перебрав их в цикле. В идеале освоить делигирование.
Так же исправить разметку чтобы были не id а классы.

[Даниил Архипов]

В последнем даже не заметил)
Если прописывать двум элементам getElementByClassName, то выдаёт ошибку Uncaught TypeError: document.getElementByClassName is not a function.
И как тогда лучше обратиться, чтобы работали все кнопки, а не только первая?

[Вадим]

darkhipov2018, Изучить основы языка, перед тем как что-то делать. Загуглите. Существует ли в DOM такой метод - getElementByClassName? Спойлер - не существует. Пропущена буква.

И как тогда лучше обратиться, чтобы работали все кнопки, а не только первая?

Я выше уже написал как.

Вы либо троль, либо идите штудируйте https://learn.javascript.ru/
Статья по теме: https://learn.javascript.ru/searching-elements-dom