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