HTML смена картинки по клику

Question

Я хочу по клику на картинку менять ее на другую, и я написал следующий код, но он почему то не работает, может кто то знает в чем проблема?

let moon = document.getElementById("moonA");
moon.onclick = function () {
  let photo = document.getElementById("moon");
  if (photo.getAttribute("src") == "moon.svg") {
    photo.src = "sun.svg";
  } else {
    photo.src = "moon.svg"
  }
}

#moonA {
  display: inline-block; 
  vertical-align: middle; line-height: 1px; 
  margin-left: 25px;
}

<a id="moonA" href="" style="" class="sun"> 
  <img id="moon" src="moon.svg" width="32" alt="logo" class="sun">
</a>

Answer 1

У вас в качестве значения href атрибута указана пустая строка href="". Такая ссылка перезагружает страницу. Т.е. скрипт срабатывает, но т.к. страница тут же перезагружается, то отображается исходное изображение.

Либо вообще уберите атрибут href из тега a, либо в обработчике клика предотвращайте действие браузера по умолчанию

moon.onclick = function () {
    ...
    return false;
}

Связанный вопрос: Is an empty href valid?

БЛОГ НА HUSL

HTML смена картинки по клику

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