Question

我正在建立一个用于家庭自动化的网站，我试图使图像在单击时发生变化，但是发生的情况是该图像消失了，并且没有变回！我尝试了多个在线脚本，但结果相同。

<!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>

Answer 1

我不确定您正在发生什么，但是您的脚本似乎运行正常，如下所示。

您确定图像路径/文件名正确吗？如果第二张图像不存在，它将只是一个没有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()">

通过javascript单击时更改图像

1 个答案: