如何显示显示：无DIV使用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

你有没有检查过你的div是否已经设置了默认样式？ 您必须将div的默认样式设置为显示：无内联

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

或者通过CSS

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

Answer 2

你的线路有双重任务：

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

Answer 3

问题是你的变量赋值

链接赋值运算符是可能的，以便为多个变量分配单个值。

请参阅此链接以获取变量分配选项https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators

var x = y = 10

然后x和y值都是10

同样在你的代码中var x是none

要达到预期效果，请使用以下选项
1.为html_to_form设置CSS以显示：none 2.在您的代码中更改变量x赋值给var x = document.getElementById（“html_to_form”）