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

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{显示:没有;}，否则文本一开始就不会被隐藏。这段代码的文本是隐藏的，如果我点击按钮，它显示文本。但如果我再次点击按钮它应该会关闭文本，但它没有。有人能帮我一下吗?谢谢!

Answer 1

=是赋值。==和===是比较。所以在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 2

设置为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 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>