为什么更改图像单击在PC上不起作用

why does change image onclick not work local on pc?

本文关键字：PC 不起作用 单击 图像 为什么      更新时间：2023-09-26

我有这个小测试脚本，当图像在服务器上时，它可以正常工作。但是当图像在我的电脑上本地时，它不起作用。(当然.html和图像在同一个文件夹中(

<img alt="" src="http://www.mywebsite.nl/images/markwhite.png" id="imgClickAndChange" onclick="changeImage()"  />
<script>
 function changeImage() {
    if (document.getElementById("imgClickAndChange").src == "http://www.mywebsite.nl/images/markwhite.png") 
    {
        document.getElementById("imgClickAndChange").src = "http://www.mywebsite.nl/images/markgreen.png";
    }
    else 
    {
        document.getElementById("imgClickAndChange").src = "http://www.mywebsite.nl/images/markwhite.png";
    }
} 
</script>

因此，在我的桌面上进行本地测试时，它不起作用。有人可以解释一下吗？

<img alt="" src="markwhite.png" id="imgClickAndChange" onclick="changeImage()"  />
<script>
function changeImage() {
    if (document.getElementById("imgClickAndChange").src == "markwhite.png") 
    {
        document.getElementById("imgClickAndChange").src = "markgreen.png";
    }
    else 
    {
        document.getElementById("imgClickAndChange").src = "markwhite.png";
    }
}
</script>

问题

您请求的是图像的实际完整 URI，而不是存储在image标记本身src attribute中的值。

它适用于您的第一个(服务器端(示例，因为 URI 的值和 src 属性中的值恰好相同。

在您的第一个示例中：

src="http://www.mywebsite.nl/images/markwhite.png"

URI和src attribute都是：http://www.mywebsite.nl/images/markwhite.png .

但是，在第二个示例中：

src="markwhite.png"

源 (URI( 不仅是文件名markwhite.png，而是文件系统的完整路径。例如，在 Unix： /home/user/me/photos/markwhite.png 上，或在 Windows： c:'web'photos'markwhite.png 上

。

您可以通过添加一些调试来简单地验证这一点。在 JavaScript 中添加一个简单的console.log：

   function changeImage() {
      if (document.getElementById("imgClickAndChange").src == "markwhite.png") 
        console.log(document.getElementById("imgClickAndChange").src);
       {
         document.getElementById("imgClickAndChange").src = "markgreen.png";
       }
      else 
       {
         document.getElementById("imgClickAndChange").src = "markwhite.png";
       }
  }

其中行：

console.log(document.getElementById("imgClickAndChange").src);

将完整的源代码输出到您的浏览器JavaScript控制台中。即使是一个简单的alert，而不是控制台.log也足够了： 

alert(document.getElementById("imgClickAndChange").src);

溶液

您要查找的只是源属性的值，而不是完整的源本身。如果你只想在vanilla JavaScript中获取元素的属性，你可以使用getAttribute getter。在您的情况下，请将.src更改为 .getAttribute('src') .

因此，这个修改后的脚本可以解决问题：

   function changeImage() {
      if (document.getElementById("imgClickAndChange").getAttribute(src) == "markwhite.png") 
       {
         document.getElementById("imgClickAndChange").src = "markgreen.png";
       }
      else 
       {
         document.getElementById("imgClickAndChange").src = "markwhite.png";
       }
  }
相关文章：