2

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

1
  • мне кажется, восклицательный знак должен быть внутри скобок
    – user176262
    24 мар 2017 в 16:13

2 ответа 2

2

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

Когда отрабатывает первый блок 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>

1
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 на противоположное только в одном месте - после проверки обоих условий.

1
  • Благодарю за ваш ответ! Я понял, что перезаписывает clicker и сразу выполняется второй блок, вариант с добавлением return мне понятен, но ваш второй код мне непонятен, возможно напишите полный код(мне в образовательных целях)? 24 мар 2017 в 16:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.