index.js:28 Uncaught TypeError: Cannot read property 'addEventListener' of null ( at toggleActiveOnClick and at Array.forEach)

Question

For a project I have to evolve a piece of code but I can not. This bit of code initially allows me to toggle the 4 clickable elements of a certain form and it works perfectly.

const choices = document.querySelectorAll('.clickable');

const toggleActiveClass = (event) => {
  event.currentTarget.classList.toggle('active');
};

const toggleActiveOnClick = (choice) => {
  choice.addEventListener('click', toggleActiveClass);
};

choices.forEach(toggleActiveOnClick);

However, now I have to make sure that when I select one or the other of the first 2 elements I can not toggle the other and the same for the next 2. I tried this piece of code but when I open the console in chrome tool i get the error message present in the title of this post. Here is the piece of code in question:

const upsell = document.querySelector('.clickable > .fas fa-shopping-cart');
const crossell = document.querySelector('.clickable > .fas fa-cart-plus');
const standard = document.querySelector('.clickable > .fas fa-gift');
const discount = document.querySelector('.clickable > .fas fa-percent');

const choices = [ upsell, crossell, standard, discount ];

const toggleActiveClass = (event) => {
  event.currentTarget.classList.toggle('active');
};

const toggleActiveOnClick = (choice) => {
  if (choice === upsell.addEventListener('click', toggleActiveClass)) {
    crossell.classList.remove('active');
  } else if (choice === crossell.addEventListener('click', toggleActiveClass)) {
    upsell.classList.remove('active');
  } else if (choice === standard.addEventListener('click', toggleActiveClass)) {
    discount.classList.remove('active');
  } else if (choice === discount.addEventListener('click', toggleActiveClass)) {
    standard.classList.remove('active');
  }
};

choices.forEach(toggleActiveOnClick);

Here is the corresponding html

<div class="form-group">
          <label for="bundle-type">Bundle Type</label>
          <div class="d-flex flex-wrap justify-content-center pt-4">
            <div id="test1">
              <div class="clickable">
                <i class="fas fa-shopping-cart"></i>
                <small>Upsell</small>
              </div>
            </div>
            <div id="test2">
              <div class="clickable">
                <i class="fas fa-cart-plus"></i>
                <small>Cros-sell</small>
              </div>
            </div>
          </div>
          <label for="bundle-type">Offer Type</label>
          <div class="d-flex flex-wrap justify-content-center pt-4">
            <div id="test3">
              <div class="clickable">
                <i class="fas fa-gift"></i>
                <small>Standard</small>
              </div>
            </div>
            <div id="test4">
              <div class="clickable">
                <i class="fas fa-percent"></i>
                <small>Discounted</small>
              </div>
            </div>
          </div>
        </div>

And the CSS

.clickable i {
  font-size: 24px;
  margin-bottom: 10px;
}

.clickable:hover i {
  color: #167FFB;
}

.clickable.active {
  color: inherit;
  border-color: inherit;
}

.clickable.active i {
  color: #0F60C4;
}

Answer 1

Your selectors are just wrong, and you could have verified them ( upsell and the others) with debugging/logging.
class="fas fa-shopping-cart" asssigns two classes to the element, fas and fa-shopping-cart . While it may be possible that after digesting the specification someone can come up with a selector for multiple classes, you could simply ignore fas (which is the same for all of them), and go for the specific ones instead:

 console.log("Original attempt:"); const upsell = document.querySelector('.clickable >.fas fa-shopping-cart'); const crossell = document.querySelector('.clickable >.fas fa-cart-plus'); console.log(upsell); console.log(crossell); console.log("Simplified attempt:"); const upsellSimple = document.querySelector('.clickable >.fa-shopping-cart'); const crossellSimple = document.querySelector('.clickable >.fa-cart-plus'); console.log(upsellSimple); console.log(crossellSimple);

 <label for="bundle-type">Bundle Type</label> <div class="d-flex flex-wrap justify-content-center pt-4"> <div id="test1"> <div class="clickable"> <i class="fas fa-shopping-cart"></i> <small>Upsell</small> </div> </div> <div id="test2"> <div class="clickable"> <i class="fas fa-cart-plus"></i> <small>Cros-sell</small> </div> </div> </div>

---

What others tried to point out: addEventListener() has no meaningful return value:

Return value: undefined

The comparisons ( if (choice === xy.addEventListener(...)){...} ) can not really do anything useful.