@lia19
Начинающий

Как заменить изображение при клике на кнопку и при следующем клике вернуть первое изображение?

Привет.
Есть кнопка в ней два изображения.
img first отображается на странице, img second нет.
При клике на img first открывается меню и должна происходить замена изображения на img second, при повторном клике img first отображается на странице, img second нет.
Как правильно это сделать в js?

html
<button type="button" class="btn">
            <img
              class="second"
              src="images/img/btn_active.jpg"
              alt="btn_active"
              style="visibility: hidden"
            />
            <img
              class="first"
              src="images/img/btn.jpg"
              alt="btn"
              style="visibility: visible"
            />
          </button>

js
window.addEventListener("DOMContentLoaded", () => {
  const menu = document.querySelector(".menu"),
    menuItem = document.querySelectorAll(".menu_item"),
    btn = document.querySelector(".btn");
  var active = document.querySelector(".second"),
    deactivate = document.querySelector(".first");

  btn.addEventListener("click", () => {
    active.style.visibility = "visible";
    deactivate.style.visibility = "hidden";
    btn.classList.toggle("btn_active");
    menu.classList.toggle("menu_active");
  });

  menuItem.forEach((item) => {
    item.addEventListener("click", () => {
      active.style.visibility = "hidden";
      deactivate.style.visibility = "visible";
      btn.classList.toggle("btn_active");
      menu.classList.toggle("menu_active");
    });
  });
});
  • Вопрос задан
  • 94 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы