javascript - OnClick if 语句只运行一次？

Question

我对用户单击某个元素时调用的 if 语句有疑问。以下是该元素的代码:

<div id="dropdown" onclick="dropper()" class="YearEvents_2016">
    <h1>2016</h1>
</div>

函数“dropper()”代码:

function dropper() {
var x = document.getElementById('dropdown');
var y = document.getElementById('YearEvents');

if (x.style.height === "14vh") {
    x.style.height = "75vh";
    y.style.height = "100vh";
} else {
    x.style.height = "14vh";
    y.style.height = "40vh";
}

}

当用户单击该元素时，代码将运行并更改 x 和 y 变量。然而，再次单击该元素时(为了再次将 x 变量的高度减小到 14)，尽管语句的 else 部分描述了应该发生某些情况，但什么也没有发生。

不确定这是否是完全显而易见的事情；我在 Javascript 方面并不那么先进。对于再次单击该元素时该函数为何不再运行的任何帮助，我们将不胜感激。

编辑 与 x 高度减小(来自 else 语句)类似，y 变量的大小也没有减小。有没有一种方法可以使 x 和 y 的更改在同一个语句中起作用，并且还有一种方法可以延迟 y 减少的执行，以便使 x 元素的大小在 y 元素执行之前稍微减少？再次感谢您的帮助。

TL;DR 第一次运行时，元素 x 和 y 的大小都会增加，然后第二次运行时 x 和 y 的大小都会减小，但 y 在 x 之后稍微减小大小。

Answer 1

使用 if 语句时，您需要使用两个等于 ==(或三个严格相等 ===)来检查是否左侧等于右侧。目前您正在为变量分配一个值，而不是检查相等性。因此，您需要将 if 语句更改为以下内容:

if (x.style.height === "14vh") {

请参阅下面的工作示例:

function dropper() {
  var x = document.getElementById('dropdown');
  if (x.style.height === "14vh") {
    x.style.height = "75vh";
  } else {
    x.style.height = "14vh";
  }
}

#dropdown {
  background: #FF0000;
  font-size: 20px;
  height: 75vh;
}

<div id="dropdown" onclick="dropper()" class="YearEvents_2016">
  <h1>2016</h1>
</div>