使用JavaScript切换段落显示

Toggle paragraph display using JavaScript

本文关键字：段落 显示 JavaScript 使用      更新时间：2023-09-26

有人能告诉我为什么下面的JavaScript代码返回一个未定义的错误，当我点击按钮第二次?

当第一次点击时，它将显示h3元素中的文本，以及按钮的内部。文本会改变。然而，当我再次单击它时，我得到了未定义的错误。

我查看DOM，看到类名在第一次单击后更改为"reveal"，它确实更改了。我假设在第二次单击时，当类名更改为"reveal"时，条件语句将跳转到"else"部分，并将类更改回"hide"和按钮文本，以便再次隐藏h3文本。然而，我得到"未捕获的类型错误:无法读取未定义的属性'className'"。

<body>
  <header>
    <h1>Header</h1>
    <div id="button-div">
        <button id="button">Click to Reveal</button>
    </div>
    <h3 class="hide">Text</h3>
    <h2>subtext</h2>
  </header>
</body>
CSS: 

.hide {
  display: none;
}

和JS:

var button = document.getElementById("button");
var textHide = document.getElementsByClassName("hide");
button.addEventListener("click", function() {
    if (textHide[0].className === "hide") {
      textHide[0].className = "reveal";
      button.innertext = "Click to Hide";
    } else {
      textHide[0].className = "hide";
      button.innertext = "Click to Reveal";  
    }
    console.log("click");
});

您得到错误"Uncaught TypeError: Cannot read property 'className' of undefined"，因为在第二次点击时没有类名为'hide'的元素。

var button = document.getElementById("button");
var textHide = document.getElementsByTagName("h3");
button.addEventListener("click", function() {
    if (textHide[0].className == "hide") {
      textHide[0].className = "reveal";
      button.innertext = "Click to Hide";
    } else {
      textHide[0].className = "hide";
      button.innertext = "Click to Reveal";  
    }
    console.log("click");
});
演示:

http://jsfiddle.net/5pq0hbye/

这是因为getElementsByClassName以live方式工作。因此，当您将className从hide更改为none时，对象textHide也被更新，然后在您的页面中没有更多具有hide CSS类的元素。

您可以使用querySelectorAll: 来避免这种行为
var textHide = document.querySelectorAll(".hide");

问题是，当您隐藏元素时，您正在清空document.getElementsByClassName("hide")，因为它是一个活动的NodeList -即每次类名更新时它都会更新。通过重置类名，您将删除hide类。

var button = document.getElementById("button");
var textHide = document.getElementsByClassName("toHide");
button.addEventListener("click", function() {
    if (textHide[0].classList.contains('hide')) {
      textHide[0].classList.remove("hide");
      button.innertext = "Click to Hide";
    } else {
      textHide[0].classList.add("hide");
      button.innertext = "Click to Reveal";  
    }
    console.log("click");
});

根据toHide hide而不是hide更新HTML中的类，这样您就有一个引用来获取元素并将其初始化为hidden。或者，您可以使用ID或不同的类名。

相关文章：