为什么我的 HTML 中的图像不会随着我的 JavaScript 函数而改变？

Question

简单地说，我有三张图片，我想在我点击图片时循环浏览它们。 换句话说，我希望 img src 在单击时更改为下一个指定的图像。 然而，这不会发生。 请记住，我拥有的所有图像都与我的 html 代码位于同一文件夹中，并且每个图像都可以自行加载，它们只是不会循环。

这是我的代码：

<!Doctype html>
<html>
<head>
</head>
<body>

<p>Hello world</p>

<img onclick="changePic()" id="pika" src="pichu.gif" alt="pichu">

<script>
    function changePic() {
    var pika = document.getElementById("pika").src;

    if(pika == "pichu.gif") {
        pika = "pikachu.gif";
    } else if (pika == "pikachu.gif") {
        pika = "raichu.gif";
    } else  {
        pika = "pichu.gif";
    }
}
</script>

</body>
</html>

Answer 1

您图像的源属性不是参考属性。 所以改变 pika 变量不会影响 pika 元素的 src 属性。

如果您将 pika 变量设置为元素本身，那么检查并在您的 if else 语句中设置 SRC 值，您应该会很好。

var pika = document.getElementById("pika");
if (pika.src == "pichu.gif") {
   pika.src = "Pikachu.gif"
}  etc...

编辑：

还忘了指出，您的 SRC 属性可能不仅仅是文件名，还可能是文件名的补丁，具体取决于您如何设置 HTML 和文件夹结构。

为什么我的 HTML 中的图像不会随着我的 JavaScript 函数而改变？

问题描述

1 个解决方案

解决方案1
1 2015-07-01 15:52:46

为什么我的 HTML 中的图像不会随着我的 JavaScript 函数而改变？

问题描述

1 个解决方案

解决方案1 1 2015-07-01 15:52:46

解决方案1
1 2015-07-01 15:52:46