Изменить изображение при нажатии с помощью JavaScript - PullRequest
Новая
       7

Изменить изображение при нажатии с помощью JavaScript

0 голосов
/ 22 марта 2019

Я создаю веб-сайт для домашней автоматизации, я пытаюсь заставить изображение измениться, когда я нажимаю на него, но что происходит, это исчезает в ничто и не меняется обратно! Я пробовал несколько онлайн-сценариев, но результат один и тот же. 

<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Raspberry Pi Home Automation</title>
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
  function changeImage() {

      if (document.getElementById("imgClickAndChange").src == "C:\Users\Nour\Desktop\Raspberry Pi Website\images\light_is_on.png")
      {
          document.getElementById("imgClickAndChange").src = "C:\Users\Nour\Desktop\Raspberry Pi Website\images\light_is_off.png";
      }
      else
      {
          document.getElementById("imgClickAndChange").src = "C:\Users\Nour\Desktop\Raspberry Pi Website\images\light_is_on.png";
      }
  }
</script>
</head>
<body>
  <p> <img src="C:\Users\Nour\Desktop\Raspberry Pi Website\images\light_is_on.png" id="imgClickAndChange" onclick="changeImage()"> </p>
</body>

</html>

1 Ответ

3 голосов
/ 22 марта 2019

Я не уверен, что происходит с вами, но ваш скрипт, кажется, работает нормально, как вы можете видеть ниже.

Вы уверены, что пути к изображениям / имена файлов верны?Если второе изображение не существует, оно будет просто пустым тегом без изображения src и, следовательно, не будет иметь ширину или высоту, чтобы вы могли щелкнуть его снова, чтобы изменить его обратно.

Проверьте консоль и позвольте намзнать, есть ли там ошибки. 

function changeImage() {
  if (document.getElementById("imgClickAndChange").src == "https://via.placeholder.com/150/0000ff"){
    document.getElementById("imgClickAndChange").src = "https://via.placeholder.com/150/ff0000";
  }else{
    document.getElementById("imgClickAndChange").src = "https://via.placeholder.com/150/0000ff";
  }
}
<img src="https://via.placeholder.com/150/0000ff" id="imgClickAndChange" onclick="changeImage()">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...