addEvent listeners not working when clicked

when i click on the button i want to console.log a message to check if it works but it doesnt do anything when clicked. I have added an if statement to check the element exist before attaching the event but nothing happens.

const watchBtn = document.querySelector('.buttons__nav__watch');

if (watchBtn) {
    watchBtn.addEventListener('click', e => {
        const watch ='.buttons__nav__watch');
<div class="buttons">
                    <div class="buttons__link">
                        <button class="buttons__link-btn">IMDB 8.0</button>
                    <div class="buttons__nav">
                        <button class="buttons__nav__like">
                                click to like
                                <svg class="buttons__nav__icon">
                                    <use xlink:href="img/sprite.svg#icon-heart"></use>
                        <button class="buttons__nav__watch">
                                <svg class="buttons__nav__icon">
                                    <use xlink:href="img/sprite.svg#icon-plus"></use>
                                add to watch list

Is this post about your movie project?

I found the solution I had to attach the eventlistener to the container because I can’t select the button by the time this code runs because its not on the page.

Are you adding the DOM content dynamically? If so, you can not query for elements before they have been added to the DOM. Other than that, I see no reason why the code wouldn’t work.