JavaScript Обучение, браузерные события, click

258

26 марта 2017, 05:29

Здравствуйте!

Изучаю 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>

Answer 1

У вас выполняются оба условия.

Когда отрабатывает первый блок if переменная clicker становится true и потом срабатывает второй блок if.

Если вы добавите return, то все начнет работать.

"use strict"; 
 
function hideInnerHtml() { 
  var ulToggle = document.querySelector("#toggle"); 
 
  if (!clicker) { 
    this.innerHTML = '▶ Сладости (нажми меня)!'; 
    ulToggle.classList.remove('hide'); 
    clicker = true; 
    return; 
  }; 
 
  if (clicker) { 
    this.innerHTML = '▼ Сладости (нажми меня)!'; 
    ulToggle.classList.add('hide'); 
    clicker = false; 
    return; 
  }; 
}; 
 
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>

Answer 2

  if (!clicker) {
    ...
    clicker = true;
  };
  // чему здесь _всегда_ равен clicker?
  if (clicker) {
    ...
    clicker = false;
  };
  // a здесь?

Вот как надо

  if (!clicker) {
    this.innerHTML = '▶ Сладости (нажми меня)!';
    ulToggle.classList.remove('hide');
  };
  if (clicker) {
    this.innerHTML = '▼ Сладости (нажми меня)!';
    ulToggle.classList.add('hide');
  };
  clicker = !clicker;

меняем значение clicker на противоположное только в одном месте - после проверки обоих условий.