0

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

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>

1 ответ 1

0

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

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

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

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

Ваш ответ

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

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