Почему не работает скрипт?

Question

[mralex37]

https://codepen.io/camobap6/pen/bGEOLYG
Не работает скрипт. На код пене он работает , но у себя я ловлю такую ошибку
Uncaught TypeError: Cannot read property 'addEventListener' of null

<script>
        const LikeButton = e => {
            e.target.classList.toggle('element-grid__like-button_active')
        }

        document.querySelector('element-grid__like-button').addEventListener("click", LikeButton)
    </script>

Answer 1

[L1nks]

Точку забыли поставить, когда ищете querySelector'ом.

<script>
        const LikeButton = e => {
            e.target.classList.toggle('element-grid__like-button_active')
        }

        document.querySelector('.element-grid__like-button').addEventListener("click", LikeButton)
    </script>

Comments

[mralex37]

Ошибка исчезла, но на нажатие все равно не реагирует (((

[v3shin]

mralex37, а вы кликаете по самой кнопке или по ее дочернему элементу? Что у вас в e.target?

[L1nks]

mralex37, как ниже в комментарии написали, добавьте полную разметку этой кнопки. Потому что скорее всего у вас есть внутри еще один элемент и e.target ссылается на него

[mralex37]

L1nks, v3shin Обновил пен

[L1nks]

mralex37, раз у вас несколько кнопок, то необходимо воспользоваться querySelectorAll. Попробуйте вот так

const LikeButton = (e) => {
    e.target.classList.toggle('element-grid__like-button_active');
}
const buttons = [...document.querySelectorAll('.element-grid__like-button')];
buttons.forEach(button => {
  button.addEventListener("click", LikeButton)
})

[mralex37]

L1nks, Cпасибо , проблема решена

Answer 2

[Станислав Шендаков]

Нужно не

...
document.querySelector('element-grid__like-button').addEventListener("click", LikeButton)
...

а

...
document.querySelector('.element-grid__like-button').addEventListener("click", LikeButton)
...

Comments

[mralex37]

Ошибка исчезла, но на нажатие все равно не реагирует (((

[Станислав Шендаков]

В Codepen все работает. Приводите здесь всю разметку.

[mralex37]

Станислав Шендаков, Проблему нашел , оказывается там несколько кнопок , а выбирается только 1я самая (она и работает) но если ставлю document.querySelectorAll то тогда не работает ни одна

[Станислав Шендаков]

Полностью код приведите, тогда можно будет что-то сказать.

[mralex37]

Станислав Шендаков уже решили проблему. Спасибо за помощь