Изучаю JavaScript,браузерные события. Написал такой код:
"use strict";
function hideInnerHtml() {
var ulToggle = document.querySelector("#toggle");
if (!clicker) {
this.innerHTML = '▶ Сладости (нажми меня)!';
ulToggle.classList.remove('hide');
clicker = true;
} else {
this.innerHTML = '▼ Сладости (нажми меня)!';
ulToggle.classList.add('hide');
clicker = false;
};
};
var clicker = false;
button.addEventListener('click', hideInnerHtml);
.hide {
display: none;
}
<button id="button">▼ Сладости (нажми меня)!</button>
<ul id="toggle" class="hide">
<li>Торт</li>
<li>Пончик</li>
<li>Пирожное</li>
</ul>
У меня здесь замыкание на clicker
, меня устраивает как работает данный код.
Мой вопрос: Почему следующий код не работает как предыдущий(в моем понимании, они просто по-разному записаны)?
"use strict";
function hideInnerHtml() {
var ulToggle = document.querySelector("#toggle");
if (!clicker) {
this.innerHTML = '▶ Сладости (нажми меня)!';
ulToggle.classList.remove('hide');
clicker = true;
};
if (clicker) {
this.innerHTML = '▼ Сладости (нажми меня)!';
ulToggle.classList.add('hide');
clicker = false;
};
};
var clicker = false;
button.addEventListener('click', hideInnerHtml);
.hide {
display: none;
}
<button id="button">▼ Сладости (нажми меня)!</button>
<ul id="toggle" class="hide">
<li>Торт</li>
<li>Пончик</li>
<li>Пирожное</li>
</ul>