为什么下面这些代码实现不了图片切换呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务一</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        #outer{
            width: 500px;
            margin: 50px auto;
            padding: 10px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var img=document.getElementsByTagName("img")[0];
var imgArr=["images/1.jpg ", "images/2.gif","images/2.jpg"];
var index=0;
var info=document.getElementById("info");
info.innerHTML="一共"+imgArr.length+"张图片，这是第"+(index+1)+"张";

prev.onclick=function(){
    //alert("上一张");
index--;
if(index<0){
    index=imgArr.length-1;
}
img.src=imgArr[index];
info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";

};
next.onclick=function(){
    //alert("上一张");
index++;
if(index>imgArr.length-1){
    index=0;
}
img.src=imgArr[index];
info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";

};


        };
    </script>
</head>
<body>
    <div id="outer">
        <p id="info">一共有3张，这是第一张</p>
        <img src="images/1.jpg"/>
<button id="prve">上一张</button>
<button id="next">下一张</button>
    </div>
</body>
</html>

```

先提个问题：

img


单词拼写错误，prev 这里是prve

是因为 上一张的id单词拼错了，初学者经常犯两个错
1、单词写错
2、没有及时Ctrl+S 保存


<button id="prve">上一张</button>