Javascript 未捕获类型错误：无法读取属性'；类列表'；在HTMLSpanElement.expand处为null

在这里，我遇到了javascript代码的一个小问题。我遵循本教程做了一些非常简单的事情（通常）：

我所做的： 当然，我调整了教程中建议的HTML以获得我想要的视觉效果，但我确保为我的不同元素保留正确的类和id属性

另一方面，我在JS中使用了相同的代码，以确保所有内容都符合教程的要求

下面是我们感兴趣的HTML部分：

<div class="item">
          <a href="contact.html">
            <img src="img/services/service-5.jpg" alt="service" />
          </a>
          <div class="expandMoreContent" id="showMoreContent5">
            <p>
              Lorem ipsum dolor sit amet consectetur,
              adipisicing elit. Enim, suscipit. Eos tempora dolorem commodi
              consectetur consequatur repellat nam, sunt repudiandae maiores
              modi velit, in possimus nesciunt quas, dicta ullam ex.
            </p>
          </div>
          <div class="expandMoreHolder">
            <span
              expand-more
              data-hidetext="Less..."
              data-showtext="...Read More"
              data-target="ShowMoreContent5"
              class="btn-expand-more"
              >...Read more</span
            >
          </div>
          <a href="contact.html" class="btn-light">
            <i class="fas fa-clipboard"></i> Request a quote
          </a>
        </div>

我想要的是： 因此，我的目标是在我的网站的service div段落上创建一个文本切换

我得到的是：

问题是，除了控制台中的以下错误外，我没有得到任何结果：uncaughttypeerror:无法读取null的属性“classList” 在HTMLSpanElement.expand。我认为有些东西卡住了，阻止了将“ExpandActive”类添加到我在JS中评论的HTML元素行中，但无法理解它到底是什么。我在开始时使用了教程中的相同代码。而且，这是一首非常新的芭蕾舞曲，因此排除了过时的痕迹：）

---

谢谢你给我提的任何建议

原因是在html

中，您的id的第一个字母是小写的

在javascript中，查询以大写字母开头的元素

data target=“ShowMoreContent5”

const showContent=document.getElementById（this.dataset.target）

改变任何一个，它都会起作用

另外：你在这里粘贴的代码还有一个问题，一个无用的右括号，请删除

---

if（showContent.classList.contains（'expand-more'））{//很明显，错误在这一行，但我无法找出它……

原因是在html

中，您的id的第一个字母是小写的

在javascript中，查询以大写字母开头的元素

data target=“ShowMoreContent5”

const showContent=document.getElementById（this.dataset.target）

改变任何一个，它都会起作用

另外：你在这里粘贴的代码还有一个问题，一个无用的右括号，请删除

---

if（showContent.classList.contains（'expand-more'））{//很显然，错误在这一行，但我无法找出它……

对不起，我忘了打招呼了……大家好！：D

classList of null

表示您试图编辑的元素不存在。请尝试

console.log（showContent）

在

const showContent=document.getElementById（this.dataset.target）

之后查看您的元素是否确实存在。对不起，我忘记打招呼了……大家好！D

类空列表

表示您尝试编辑的元素不存在。请尝试

控制台.log（showContent）

const showContent=document.getElementById（this.dataset.target）之后查看您的元素是否确实存在。哦，天哪！我从昨天就开始使用它了！它现在工作正常，谢谢！编辑：无用的右括号不在我的原始代码中。我不知道它来自何处，但它很好。再次感谢！：）哦，天哪！我从昨天开始使用它！它现在工作正常，谢谢！编辑：无用的右括号不存在在我的原始代码中。我不知道它来自何处，但没关系。再次感谢！：）

// Show and hide more or less text services

document.addEventListener('DOMContentLoaded', () => {
const expandsMore = document.querySelectorAll('[expand-more]')

function expand() {
const showContent = document.getElementById(this.dataset.target)
  if(showContent.classList.contains('expand-more'))) { // Apparently the error is on this line, but I can't figure it out...
    this.innerHTML=this.dataset.showText
}else {
  this.innerHTML=this.dataset.hideText

}
showContent.classList.toggle('expand-active')
}
expandsMore.forEach(expandMore => {
  expandMore.addEventListener('click', expand)
})

})