button нажимается только 1 раз (js)

Question

Хочу сделать так, чтоб при нажатии на кнопку весь html в блоке .settings-chats-section стирался, а вместо содержимого блока появлался img, кликая на который содержимое снова появлялось. Однако кликая на кнопку я могу стереть и вернуть содержимое только один раз. В чем может быть проблема?

// when user press ☰, it will open to user settings button
const settingsButton = document.querySelector(".settings");
settingsButton.addEventListener("click", (event) => {
  event.preventDefault();
  const settingsAndChatsSection = document.querySelector(".settings-chats-section");

  //getting сopy of innerHtml section to make it easy to restore
  const settingsAndChatsSectionCopy = settingsAndChatsSection.innerHTML;
  console.log(settingsAndChatsSection);

  settingsAndChatsSection.innerHTML = '';
  const backToChatsButton = document.createElement("img");
  backToChatsButton.src = "resources/img/blue-arrow.jpg";
  backToChatsButton.alt = "Back to chats";
  backToChatsButton.id = "back-to-chat-button";
  settingsAndChatsSection.appendChild(backToChatsButton);

  //if button clicked - get back to chats
  backToChatsButton.addEventListener("click", (event) => {
    event.preventDefault();
    settingsAndChatsSection.innerHTML = settingsAndChatsSectionCopy;
  })
})

<div class="settings-chats-section">
  <div class="search-and-settings">
    <button class="settings">☰</button>
    <input type="text" name="search" placeholder="Search...">
  </div>
  <div class="chats">
    <section class="chat">
      <p class="temp-chat-name">temp chat</p>
      <p class="temp-last-message">LastUser: message</p>
      <img src="resources/img/unknown_user.png" alt="chat-photo" class="chat-photo">
    </section>
  </div>
</div>

Answer 1

settingsButton.addEventListener("click", — добавляете обработчик на исходную кнопку, потом при клике удаляете кнопку, позже заменяя её на другую: С таким же HTML-содержимым, но уже без добавленных ранее обработчиков.

Соответственно, нужно или каждый раз заново добавлять обработчики, или вместо постоянного создания / удаления HTML, создать его один раз и при клике только переключать значения display: none / block;

Вместо вставки через JS, изначально "вруную" добавил <img style="display: none;" в HTML. Можете переписать вставку через JS.

const chats_section = document.querySelector(".settings-chats-section");
const back_to_chat = document.querySelector("#back-to-chat-button")
  
document.querySelector(".settings").addEventListener("click", function(e) {
  e.preventDefault();
  
  display(chats_section.children, "none"); // Скрывает все дочерниие элементы
  back_to_chat.style.display = "block"; // Показывает кнопку
});

back_to_chat.addEventListener("click", function(e) {
  e.preventDefault();

  display(chats_section.children, "");
  // заменяет "none" на "" — все элементы получают своё начальное значение display.
  back_to_chat.style.display = "none"; // Скрывает кнопку.
});

/***/
function display(elems, value) {
  if (elems instanceof HTMLElement) elems = [elems];

  for (let i = 0; i < elems.length; i++) {
    elems[i].style.display = value;
  }
}

<div class="settings-chats-section">
  <div class="search-and-settings">
    <button class="settings">☰</button>
    <input type="text" name="search" placeholder="Search...">
  </div>
  <div class="chats">
    <section class="chat">
      <p class="temp-chat-name">temp chat</p>
      <p class="temp-last-message">LastUser: message</p>
      <img src="resources/img/unknown_user.png" alt="chat-photo" class="chat-photo">
    </section>
  </div>
  
  <img style="display: none;" src="resources/img/blue-arrow.jpg" alt="Back to chats" id="back-to-chat-button">
</div>

Было бы проще иметь такой HTML:

<section>
  <div>Всё основное и кнопка "открыть настройки"</div>
  <div style="display: none">Все настройки и кнопка "назад"</div>
<section>

И при кликах просто переключать видимость двух блоков, чтобы не возиться с этими переборами.

Answer 2

попробуй написать прослушки иначе:

document.addEventListener('click', function (e) {
   
if (!e.target.matches('.settings')) return;
e.preventDefault();
//твой код
}, false)

БЛОГ НА HUSL

button нажимается только 1 раз (js)

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