addEvent listeners not working when clicked

JavaScript
1

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 = e.target.matches('.buttons__nav__watch');
        console.log('works');
    });
}

<div class="buttons">
                    <div class="buttons__link">
                        <button class="buttons__link-btn">IMDB 8.0</button>
                    </div>
    
                    <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>
                                </svg>
                            </button>
                        <button class="buttons__nav__watch">
                                <svg class="buttons__nav__icon">
                                    <use xlink:href="img/sprite.svg#icon-plus"></use>
                                </svg>
                                add to watch list
    
                            </button>
                    </div>
    
                </div>
2

Is this post about your movie project?

3

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.

4

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.