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

您所在的行中有一个 double 分配：

var x = document.getElementById("how_to_form").style.display = 'none';

它首先将display分配为无：

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.将CSS设置为html_to_form显示：无 2.在代码中将变量x分配更改为 var x = document.getElementById（“ html_to_form”）

如何显示显示：没有使用Java的DIV

3 个答案: