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

Question

[Lia Sav]

Привет.
Есть кнопка в ней два изображения.
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");
    });
  });
});

Comments

[Ankhena]

Вряд ли изображения в кнопке являются контентными.
Скорее это фон и/или псевдо.
Так что, просто менять класс кнопке.

[Lia Sav]

Ankhena, спасибо большое!
Сделала изображение как фон, добавила дополнительный класс и все работает)