单击按钮时更改图片

这似乎应该可以工作，但不会。我不确定问题出在哪里 - 要么我做错了，要么可能出现语法错误。我只是没有做任何事情。我试图让按钮被点击时改变当前图片。我是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>

来源

2013-10-26 user2884447

这是你可以调试自己的东西。查看[JavaScript错误控制台]（http://www.netmagazine.com/tutorials/javascript-debugging-beginners）并查看错误消息的内容。 – JJJ

你错过了引号.getElementById('theImage')

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

来源

2013-10-26 17:08:21 Roar

在该行的末尾添加"到getElementById论证和删除)：

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

http://jsfiddle.net/cDd8J/ - 在这里。有用。

theImage只是元素的id，而不是变量，所以你必须把它放在引号中。

来源

2013-10-26 17:08:43

有很多方法，你可以使用内联属性或使用id在script.Here的一个调用它try.Calling功能，

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

Demo

来源

2013-10-26 17:13:44

您可以使用内嵌HTML： <img src="img1.jpg" onclick="this.src='img2.jpg'">效果最好。

来源

2016-11-19 13:33:48 CoderKube

单击按钮时更改图片

回答

相关问题