Question

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

第一次单击时，它将显示h3元素中的文本，按钮的inner.text将更改。但是，当我再次单击它时，我得到未定义的错误。

我查看DOM，看到第一次单击后类名已更改为“显示”，并且确实如此。我假设在第二次单击时，当类名更改为“显示”时，条件语句将跳转到“else”部分并将类更改回“隐藏”并返回按钮文本以便再次隐藏h3文本。但是，我得到了“Uncaught TypeError：无法读取属性'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");
});

Answer 1

这是因为event.model.item以 live 的方式工作。因此，当您将getElementsByClassName从className更改为hide时，对象none也会更新，然后不再有textHide CSS的元素您网页中的课程。

您可以使用hide：

来避免这种行为

querySelectorAll

Answer 2

问题在于，当你隐藏元素时，你正在清空document.getElementsByClassName("hide")，因为它是live 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");
});

将相应的HTML中的类更新为toHide hide而不是hide，以便您获得元素的引用并初始化隐藏。或者，您可以使用ID或不同的类名。

Answer 3

您收到错误“Uncaught TypeError：无法读取未定义的属性'className'，因为没有元素类名称'hide'on第二次点击。

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/

使用JavaScript切换段落显示

3 个答案: