I am trying to add an event listener to a HTML element on my site. The elements in question use a class name to group them together. However my event listener does not work when I try to click on the element that makes the changes. Here is the relevant code:

```js
// page elements for bright/dark mode

let brightOrDarkModeButton = document.querySelector('.sun-img-container')
let navBar = document.querySelector('.navBar')
let navBarParagraphElements = document.querySelectorAll('.nav-menu-option');

//

// DOM Events

brightOrDarkModeButton.addEventListener('click', changeBackgroundColour = () => {
  navBar.style.transition = 'background-color 0.15s linear';
  navBar.style.backgroundColor = 'white';
  navBarParagraphElements.style.transition = 'color 0.15s linear';
  for (let i = 0; i < navBarParagraphElements.length; i++) {
    navBarParagraphElements[i].style.color = 'black';
  }
});
```

```html
<nav class="navBar">
  <a class='BP' href="REMOVED FOR PRIVACY">BP</a>
  <div class="nav-menu">
    <a href="#" class="nav-menu-option">Home</a>
    <a href="#about-me" class="nav-menu-option">About Me</a>
    <a href="#projects" class="nav-menu-option">Projects</a>
  </div>
  <a class="CV-container" href="REMOVED FOR PRIVACY">
    <p class="CV">CV</p>
  </a>
  <div class="sun-img-container">
    <img src="images/Sun.png">
  </div>
</nav>
```