为什么赢了'；HTML中的图像是否会随着JavaScript函数的变化而变化？_Javascript_Html

为什么赢了'；HTML中的图像是否会随着JavaScript函数的变化而变化？

javascript html

为什么赢了'；HTML中的图像是否会随着JavaScript函数的变化而变化？,javascript,html,Javascript,Html,简单地说，我有三张图片，当我点击图片时，我想循环浏览它们。换句话说，我希望在单击img src时将其更改为下一个指定的图像。然而，这并没有发生。请记住，我所有的图像都和我的html代码在同一个文件夹中，并且每个图像都可以自己加载，它们不会循环加载这是我的密码： <!Doctype html> <html> <head> </head> <body> <p>Hello world</p> <img on

简单地说，我有三张图片，当我点击图片时，我想循环浏览它们。换句话说，我希望在单击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>


你好，世界
函数changePic（）{
var pika=document.getElementById（“pika”）.src；
如果（pika==“pichu.gif”）{
pika=“pikachu.gif”；
}else if（pika==“pikachu.gif”）{
pika=“raichu.gif”；
}否则{
pika=“pichu.gif”；
}
}

图像的源属性不是引用属性。因此，更改变量pika不会影响pika元素的src属性

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

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

编辑：

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

您是否调试了代码，以便在单击图像时查看

pika

变量是什么？我可以如何执行此操作？将变量记录到控制台或向其发出警报。请参阅将“警报”或“控制台.log”添加到函数“changePic（）”中，或者如果您使用chrome，请参阅“开发人员工具”一节的“源”，您可以在调用changePic（）函数时将断点添加到该函数中。在脚本的底部，我添加了“console.log（pika）”。每次单击，控制台都会记录“pichu.gif”。我根据您的建议对其进行了更改，但仍然不起作用，但有些地方发生了变化。控制台仍在记录“pichu.gif”图像的目录名，但当我现在单击该图像时，我注意到相同的gif刚刚被重新加载。起初，我确实按照你的建议做了，而且做了同样的事情。摆弄它，我最终怀疑原因是它实际上直接转到else语句并加载相同的gif，就好像它是另一个一样。