Как отменить предыдущее условие в if?

Question

Помогите решить такую проблему. Вообщем при клике на кнопу "ВЫБРАТЬ" я меняю цвет бордера у контейнера, добавляя класс selected. Потом проверяю, если этот класс присутствует меняю текст в p.text на новый. Как мне сделать, чтобы при втором нажатии на кнопу "ВЫБРАТЬ" (обратной смене цвета бордера), поменять текст на тот который был(на старый текст)??? в условии вместо return. Просто записывать старый текст не нужно.

    let textEl = document.querySelector(".text");
    let btnEl = document.querySelector(".btn");
    let containerEl = document.querySelector(".container");

    function changeBorder() {
      let selectEl = containerEl.classList.toggle("selected");
      
      if(containerEl.classList.contains("selected") ){
        textEl.innerHTML = "ВОТ НОВЫЙ ТЕКСТ";
      } else {
        return; // ЧТО НУЖНО ВМЕСТО RETURN?
      }
    };

    btnEl.addEventListener("click", changeBorder)

.container {
  border: 5px solid blue;
}
.text {
  background: pink;
  margin: 0;
  padding: 50px;
  text-align: center;
}
.btn {
  background: green;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}
.selected {
  border: 5px solid red;
}

  <div class="container">
    <p class="text">ЭТО СТАРЫЙ ТЕКСТ</p>
    <div class="btn">ВЫБРАТЬ</div>
  </div>

Answer 1

Чтобы узнать, что там было написано до клика, нужно заранее где-то хранить текст элемента. Например, во внешней переменной. В случае с несколькими элементами - в массиве.

.classList.toggle() возвращает true, если класс был добавлен, иначе — false. Можно сразу использовать это значение, а не проверять заново .classList.contains(...)

let el = {
  text: document.querySelectorAll(".text"),
  btn: document.querySelectorAll(".btn"),
  container: document.querySelectorAll(".container"),
};

let textStorage = new Array(el.btn.length);

for (let i = 0; i < el.btn.length; i++) {
  textStorage[i] = el.text[i].textContent;
  // Исходные тексты элементов сохраняются в массиве под теми же индексами.

  el.btn[i].addEventListener("click", changeBorder);
}

function changeBorder() {
  let i = [].indexOf.call(el.btn, this);
  // Находит индекс кликнутой кнопки среди всех остальных кнопок.
  // this — ссылка на кликнутую кнопку
  
  let selected = el.container[i].classList.toggle("selected");

  el.text[i].textContent = selected ? "НОВЫЙ ТЕКСТ" : textStorage[i];
};

.container {
  border: 5px solid blue;
}

.text {
  background: #7e3;
  margin: 0;
  padding: 10px;
  text-align: center;
}

.btn {
  background: green;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.selected {
  border: 5px solid red;
}

<div class="container">
  <p class="text">1111</p>
  <div class="btn">ВЫБРАТЬ</div>
</div>

<div class="container">
  <p class="text">2222</p>
  <div class="btn">ВЫБРАТЬ</div>
</div>

БЛОГ НА HUSL

Как отменить предыдущее условие в if?

Ответы (1 шт):