Проблема не добавления события на кнопку ⇐ CSS

[Anonymous]

Я изучаю HTML, CSS и JS.
Чтобы добавить событие щелчка к кнопке со стрелкой в ​​flickity,
Я использовал addEventListener. Однако произошла следующая ошибка.
TypeError: Cannot read properties of null (reading 'addEventListener')
at index.js:3:6

Я все еще новичок, поэтому не знаю, в чем дело.

html< /strong>







My Calendar


1
3
4
5







css
.carousel-cell {
width: 100%;
font-size: 48px;
background: transparent;
text-align: center;
}

.carousel .flickity-prev-next-button {
width: 100px;
height: 50px;
background: transparent;
border-radius: 0;
border: none;
box-shadow: none;
}

.carousel .flickity-prev-next-button.previous {
left: 250px;
}

.carousel .flickity-prev-next-button.next {
right: 250px;
}

Javascript
const btn = document.querySelector(".carousel .flickity-prev-next-button");

btn.addEventListener("click", () => {
console.log("Hello")
});


Подробнее здесь: https://stackoverflow.com/questions/787 ... the-button