我怎么理解為什么閱讀類列表部分是 null？

Question

我正在嘗試在網站上制作一個按鈕來隱藏/顯示我的幻燈片，並將其替換為不同的組件。 我之前做過並且成功了，所以我認為類似的代碼可以工作，但它沒有。

這是我的按鈕的 html：

<li><div class="behandlung-btn">Meine Behandlung</div></li>

這是滑塊開始的 html：

<div class="sliders hideContent">
  <div class="slider home-slider clearfix" data-auto-play="8000">

當然，我關閉了標簽，但由於它很長，我不想全部粘貼。

這是我嘗試過的香草JS：

   let showMoreBtn = document.querySelectorAll(".behandlung-btn");
  showMoreBtn.forEach((eachBtn) => {
    let textContainer = eachBtn.parentNode;
    let contentBox = textContainer.querySelector(".sliders").classList;
    eachBtn.addEventListener("click", (event) => {
      event.preventDefault();
      if (contentBox.contains("showContent")) {
        contentBox.remove("showContent");
        contentBox.add("hideContent");
        eachBtn.innerHTML = `<h12>ZEIG WENIGER</h12>`;
      } else {
        contentBox.add("showContent");
        contentBox.remove("hideContent");
        eachBtn.innerHTML = `<h12>ZEIG MEHR</h12>`;
      }
    });
  });

但它仍然說

Uncaught TypeError: Cannot read properties of null (reading 'classList')
at index.html:436:65
at NodeList.forEach (<anonymous>)
at index.html:434:19

我知道 Stackoverflow 中有很多關於這個 typeError 的問題，我檢查了它們，但仍然無法理解問題出在哪里，而且我有點不知所措。 請幫幫我。

感謝人們提前幫助！

Answer 1

似乎在textContainer元素中沒有帶有.sliders class 的元素，該元素是其 class behandlung-btn的button的父級

您需要改用document 。

let contentBox = document.querySelector(".sliders").classList;