Как исправить конфликт двух событий JS

Question

При клике на "выбрать" и "купить" я меняю бекграунд элементов.Только при клике на "выбрать" меня туда и обратно а при клике на "купить" только в одну сторону, меняя текст на этом месте. Вот моя проблема. После того как я меняю и возвращаю обратно бекграунд при клике на "выбрать" почему то после этого кнопка "купить" не работает. Хотя если нажать её в самом начале она работает. Подскажите в чем дело и как это исправить.

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

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

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

    for (let i = 0; i < el.span.length; i++) {
      el.span[i].addEventListener("click", buyElement);
    };

    function changeBorder() {
      let i = [].indexOf.call(el.btn, this);
      // Находит индекс кликнутой кнопки среди всех остальных кнопок.
      // this — ссылка на кликнутую кнопку
      let selected = el.container[i].classList.toggle("selected");
      el.text[i].innerHTML = selected ? "НОВЫЙ НОВЫЙ ТЕКСТ" : textStorage[i];
    };

    function buyElement() {
      let i = [].indexOf.call(el.span, this);
      let selectedElement = el.container[i].classList.add("selected");
      el.text[i].innerHTML = "НОВЫЙ НОВЫЙ ТЕКСТ";
    }

.container {
  border: 5px solid blue;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

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

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

.selected {
  border: 5px solid red;
}
.span {
  color: white;
  cursor: pointer;
}

  <div class="container">
    <div class="btn">ВЫБРАТЬ</div>
    <p class="text">СТАРЫЙ ТЕКСТ <span class="span">КУПИТЬ</span></p>
  </div>
  
  <div class="container">
    <div class="btn">ВЫБРАТЬ</div>
    <p class="text">СТАРЫЙ ТЕКСТ <span class="span">КУПИТЬ</span></p>
  </div>

Answer 1

Если не сильно переделывать, то кнопку можно просто скрывать. Тогда листенер будет работать.

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

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

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

    for (let i = 0; i < el.span.length; i++) {
      el.span[i].addEventListener("click", buyElement);
    }

    function changeBorder() {
      let i = [].indexOf.call(el.btn, this);
      // Находит индекс кликнутой кнопки среди всех остальных кнопок.
      // this — ссылка на кликнутую кнопку
      let selected = el.container[i].classList.toggle("selected");
      el.text[i].innerHTML = selected ? "НОВЫЙ НОВЫЙ ТЕКСТ" : textStorage[i];
      let buy = el.span[i].classList.toggle("active");
  
    }

    function buyElement() {
      let i = [].indexOf.call(el.span, this);
      let selectedElement = el.container[i].classList.add("selected");
      el.text[i].innerHTML = "НОВЫЙ НОВЫЙ ТЕКСТ";
      let buy = el.span[i].classList.toggle("active");      
    }

.container {
  border: 5px solid blue;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.text {
  
  padding: 10px;
  text-align: center;
  margin: 0;
  
}

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

.selected {
  border: 5px solid red;
}
.span {
  color: white;
  cursor: pointer;
  
  
}

.span.active {
  display: none;
}

.buy {
  display: flex;
  width: 100%;
  background: #7e3;
  justify-content: center;
  align-items: center;
}

  <div class="container">
    <div class="btn">ВЫБРАТЬ</div>
    <div class="buy"><p class="text">СТАРЫЙ ТЕКСТ</p> <span class="span">КУПИТЬ</span> </div>
  </div>
  
  <div class="container">
    <div class="btn">ВЫБРАТЬ</div>
    <div class="buy"><p class="text">СТАРЫЙ ТЕКСТ</p> <span class="span">КУПИТЬ</span> </div>
  </div>

БЛОГ НА HUSL

Как исправить конфликт двух событий JS

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