为何点击a属性的文字，图片会改变？

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script> var n = 1; function changePic(m){ return n = m; } function change(){ var myImg = document.getElementsByTagName("img")[0]; myImg.src = "images/0" + n + ".jpg"; if(n<5)n++; else n=1; } </script></head><body onload="setInterval(change,2000);"> <img src="images/01.jpg" alt="" width="200"> <div> <a href="#" onclick="changePic(1)">屋檐</a> <a href="#" onclick="changePic(2)">旅途</a> <a href="#" onclick="changePic(3)">红墙</a> <a href="#" onclick="changePic(4)">梅花</a> <a href="#" onclick="changePic(5)">宫殿</a> </div></body></html>

n是一个全局变量。changePic并没有修改图片，他只是修改了n。在change里面，逻辑是：将图片的编号替换为n，然后将n修改为下一次的编号。那么在下一个change执行之前呢，changePic提前修改了n的值，导致change将点击的编号展示了出来。这个n就是点击时传入的。所以这是一个全局变量的运用问题。changePic没有改图片，只是改了一个变量，这个变量用于描述下一张图片的编号。点击也没有立即换图，换图还是等到了Interval的两秒到了，才通过change换图

为何点击a属性的文字，图片会改变？

1回答