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 的大小都减小了，但是在 x 之后 y 的大小减小了一点。

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>