javascript - 如何显示显示 :none DIV using Javascript

Question

我有一个显示设置为无的 DIV，通过使用 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";
    }
  }

Answer 1

你的线路有一个双重分配:

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);