如何使用Javascript显示display:none DIV

我有一个DIV，它的显示设置为none，通过使用javascript，我尝试通过单击按钮来显示它。但事实恰恰相反。我的DIV已显示，当我单击按钮时，它会隐藏DIV。我在这里做错了什么，请帮助

这是我的按钮和div：

<button onclick="myFunction()">SHOW</button>
    <div id="how_to_form">
      <img src="../images/view.png">
    </div>

---

是否已检查是否已将默认样式设置为div？ 您必须将div的默认样式设置为display:none by inline

<div id="how_to_form" style="display:none">

或者通过css

<style>
    #how_to_form{ display:none }
</style>

#如何形成{display:none}

您在那里的行有一个双重赋值：

var x = document.getElementById("how_to_form").style.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);

---

问题是变量赋值

链接赋值运算符可以将单个值赋值给多个变量

有关变量分配选项，请参阅此链接

变量x=y=10

那么x和y值都是10

同样，在代码中，var x是none

要达到预期效果，请使用下面的选项
1.将html的CSS设置为要显示的表单：无 2.在代码中将变量x赋值更改为

---

var x=document.getElementById（“html\u to\u form”）

您正在将

x

分配给

='none'

的结果。此时，

x

是字符串

'none'

，没有

style

属性，我使用.style.display为其分配了属性。这是分配其显示设置的错误方式吗？将变量x值更改为var x=document.getElementById（“how_to_form”）哦，谢谢@pokken！这管用！没想到css会这么做。但是，我可以问一下我的javascript代码中的display='none'有什么问题吗？关于这个处理程序属性，这是创建按钮的另一种方法吗？这是附加处理程序的另一种（更好）方法，而不是使用内联HTML属性。但是按钮的样式不是更难吗？如果我使用CSS设计它的样式？一点也不-您所要做的就是删除

onclick=“myFunction（）”

并使用行

document.querySelector（'button'）。addEventListener（'click'，myFunction'）
document.querySelector('button').addEventListener('click', myFunction);