index.js:28 未捕獲類型錯誤：無法讀取 null 的屬性“addEventListener”（在 toggleActiveOnClick 和 Array.forEach 中）

Question

對於一個項目，我必須開發一段代碼，但我不能。 這段代碼最初允許我切換某個表單的 4 個可點擊元素，並且效果很好。

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

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

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

choices.forEach(toggleActiveOnClick);

但是，現在我必須確保當我 select 前 2 個元素中的一個或另一個時，我不能切換另一個，下一個 2 相同。我嘗試了這段代碼，但是當我在 chrome 工具中打開控制台時我收到這篇文章標題中出現的錯誤消息。 這是有問題的代碼：

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);

這里是對應的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>

和 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

您的選擇器是錯誤的，您可以通過調試/記錄驗證它們（ upsell和其他）。
class="fas fa-shopping-cart"將兩個類分配給元素fas和fa-shopping-cart 。 雖然在消化規范后可能有人可以提出多個類的選擇器，但您可以簡單地忽略fas （對所有類都相同），而 go 則用於特定的類：

 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>

---

其他人試圖指出： addEventListener()沒有有意義的返回值：

返回值： undefined

比較（ if (choice === xy.addEventListener(...)){...} ）並不能真正做任何有用的事情。