前几天做一个点击按钮，就实现切换图片效果的小demo时，代码看上去没问题，就是达不到效果。让我百思不得其解。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/1.png"/>
<input type="button" id="btn" value="改变图片" onclick="changePic()" />
</body>
<script type="text/javascript">
window.onload=function(){
//1.获取img标签
var img=document.getElementsByTagName("img");
//2.定义count来存对应图片---图片名字分别为1,2,3,4
var count=2;
//3.切换图片函数
function changePic(){
if(count<4){
img[0].src="img/"+count+".png";
count++;
}else if(count==4){
img[0].src="img/"+count+".png";
count=1;
}
}
}
</script>
</html>
一直以来，我们写前端代码时，第一件事就是写window.onload的呀！为什么会出问题呢？
后来，上网去查，才得知是因为changePic（）放在window.onload中就变成了一个局部函数了，不能实现在标签中的直接调用。
去掉window.onload就可以使用了。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/1.png"/>
<input type="button" id="btn" value="改变图片" onclick="changePic()" />
</body>
<script type="text/javascript">
//1.获取img标签
var img=document.getElementsByTagName("img");
//2.定义count来存对应图片---图片名字分别为1,2,3,4
var count=2;
//3.切换图片函数
function changePic(){
if(count<4){
img[0].src="img/"+count+".png";
count++;
}else if(count==4){
img[0].src="img/"+count+".png";
count=1;
}
}
</script>
</html>
如果你非要用window.onload，就使用–对象.函数–的方法
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/1.png"/>
<input type="button" id="btn" value="改变图片" />
</body>
<script type="text/javascript">
window.onload=function(){
//1.获取img标签
var img=document.getElementsByTagName("img");
//2.定义count来存对应图片---图片名字分别为1,2,3,4
var count=2;
//3.切换图片函数
document.getElementById("btn").onclick=function(){
if(count<4){
img[0].src="img/"+count+".png";
count++;
}else if(count==4){
img[0].src="img/"+count+".png";
count=1;
}
}
}
</script>
</html>