Javascript 单击按钮时更改图像_Javascript_Image_Onclick

Javascript 单击按钮时更改图像

javascript image

Javascript 单击按钮时更改图像,javascript,image,onclick,Javascript,Image,Onclick,这似乎应该是可行的，但实际上并非如此。我不确定问题出在哪里——要么我做错了，要么我可能有语法错误。我什么都没做。我试图在单击按钮时更改当前图片。我是Javascript的初学者，所以请温柔一点；）谢谢大家! <html> <script> function pictureChange() { document.getElementById(theImage).src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8

这似乎应该是可行的，但实际上并非如此。我不确定问题出在哪里——要么我做错了，要么我可能有语法错误。我什么都没做。我试图在单击按钮时更改当前图片。我是Javascript的初学者，所以请温柔一点；）谢谢大家!

<html>
<script>
function pictureChange()
{
document.getElementById(theImage).src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png");
}
</script>
<body>
<img id="theImage" src="http://31.media.tumblr.com/18b5f8f0a00ad01e50f7ae2f513be52d/tumblr_msqcl4iwM01soh1p8o1_500.png">
<p><input type="button" id="theButton" value="click me!" onclick="pictureChange()"></p>
</body>
</html>


函数pictureChange（）
{
document.getElementById（theImage）.src=”http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png");
}

您错过了

.getElementById（'theImage'）中的引号。

将

“

添加到

getElementById

参数，并删除行末尾的

）

：

<script>
    function pictureChange()
    {
          document.getElementById("theImage").src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png";
    }
</script>


函数pictureChange（）
{
document.getElementById（“theImage”）.src=”http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png";
}

-在这里，很有效

图像

只是元素的id，而不是变量，因此您必须将其放在引号中。

有很多方法可以尝试。使用内联属性调用函数或使用脚本中的id调用函数。以下是一种

theButton.onclick = function pictureChange()
{
   document.getElementById("theImage").src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png";
}

您可以使用内联HTML：

效果最好。

这是您可以自己调试的。查看并检查错误消息。

theButton.onclick = function pictureChange()
{
   document.getElementById("theImage").src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png";
}