0

Хочу сделать так, чтоб при нажатии на кнопку весь 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>

2 ответа 2

2

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

document.addEventListener('click', function (e) {
   
if (!e.target.matches('.settings')) return;
e.preventDefault();
//твой код
}, false)
2
  • , false — оно и так по умолчанию false) А так, вариант вполне рабочий. Вместо document, можно взять элемент-их общего родителя, который никуда не удаляется. 13 сен 2020 в 15:12
  • ну мало ли еще потом захочет и родителя снести ) 13 сен 2020 в 15:14
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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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