OnClick, если заявление только один раз?

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) ничего не происходит, несмотря на то, что остальная часть выражения показывает, что что-то должно произойти.

Не уверен, что это что-то совершенно очевидно;Я не настолько продвинут в 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>