我有一个DIV，它的显示设置为none，通过使用javascript我试图通过使用按钮的onclick来显示它。但是，情况恰恰相反。我的DIV已经显示，当我单击按钮时，它会隐藏DIV。我在这里做错了，请帮助！
这是我的按钮和div：
<button onclick="myFunction()">SHOW</button>
<div id="how_to_form">
<img src="../images/view.png">
</div>
这是JS代码：
function myFunction() {
var x = document.getElementById("how_to_form").style.display = 'none';
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
您所在的行有一项双重任务：
var x = document.getElementById("how_to_form").style.display = 'none';
它首先将分配display为none：
document.getElementById("how_to_form").style.display = 'none';
然后采用该表达式的结果（这是您分配的字符串），并将其分配给x：
var x = 'none';
这不是你想要的。首先声明元素的变量，然后分配其样式。
另外，听起来您希望元素开始隐藏-在函数之外分配其初始样式：
const form = document.getElementById("how_to_form");
form.style.display = 'none';
function myFunction() {
if (form.style.display === "none") {
form.style.display = "block";
} else {
form.style.display = "none";
}
}
或者，为了更简洁，请使用条件运算符：
function myFunction() {
form.style.display = form.style.display === "none"
? 'block'
: 'none';
}
还可以考虑使用Javascript而不是使用内联HTML属性来正确附加处理程序，这些属性通常被认为是很差的做法，并且很难管理：
document.querySelector('button').addEventListener('click', myFunction);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句