如何通过单击按钮显示隐藏文本？

Question

 function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display = "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

 <ul> <li><button onclick="myFunction()">Try it</button> <div id="myDIV"><p>This is my DIV element.</p></div </li> </ul>

在 css 文件中，我包含了命令：#myDIV{ display: none; 因为否则一开始文本不会被隐藏。 使用此代码，文本首先被隐藏，如果我单击按钮，它会显示文本。 但是，如果我再次单击该按钮，它应该关闭它没有关闭的文本。 有人可以帮我吗？ 谢谢！

Answer 1

将此设置为 HTML

<div id="myDIV" style="display: none;"><p>This is my DIV element.</p></div>

和这个 javascript

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display == "none") {
        x.style.display = "block";
    } else {
       x.style.display = "none";
      }
}

这现在将起作用，因为 display none 默认情况下不是 div 元素，因此 javascript 将看不到 display none 样式并且不会执行该功能。 所以你需要指定 style display none 并且该功能将正常工作

Answer 2

=是赋值。 ==和===是比较。 所以在if里面，把它改成这两个之一。

您也没有正确关闭您提交的代码中的<div> 。

另一件事是您在 CSS 文件中设置display: none 。 JavaScript 无法访问此值，它只能访问元素的 HTML 标记中的style="..." 。 要解决此问题，请检查它是否未隐藏并在if/else块的两侧交换。

 function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display == "block") { // `=` to `==` or `===` x.style.display = "none"; } else { x.style.display = "block"; } }

 #myDIV { display: none; }

 <ul> <li><button onclick="myFunction()">Try it</button> <div id="myDIV"> <p>This is my DIV element.</p> </div> <!-- this div wasn't closed properly --> </li> </ul>

Answer 3

 function myFunction() { var x = document.getElementById("myDIV"); x.style.display = x.style.display != "block"?"block":"none" }

 #myDIV{ display: none; }

 <ul> <li><button onclick="myFunction()">Try it</button> <div id="myDIV"><p>This is my DIV element.</p></div </li> </ul>