画像をクリックして切り替えるJavaScript

<div class="img">
 <img src="images/1.jpg" id="myImg" class="myImg" alt="ここに 1.jpg があります">
 <p>
 <input type="button" id="pre" class="btn" value="前へ">
 <input type="button" id="next" class="btn" value="次へ">
 </p> 
</div>

*{
 マージン: 0;
 パディング: 0;
}
画像{
 本文:なし;
}
ボタン{
 アウトライン: なし;
 垂直位置合わせ: 中央;
}
.img{
 幅: 100%;
 左マージン: 自動;
 右マージン: 自動;
 上マージン: 20px;
 テキスト配置: 中央;
}
.myImg{
 幅: 500ピクセル;
 高さ: 300px;
}
p{
 テキスト配置: 中央;
}
p .btn{
 幅: 100ピクセル;
 高さ: 30px;
 背景: #306bbf;
 色: #fff;
 上マージン: 20px;
 下マージン: 20px;
}

//タグを見つける let myImg = document.getElementById("myImg");
pre = document.getElementById("pre"); とします。
次は document.getElementById("next"); です。

//画像を保存する配列を作成します。let arrImg = ["images/1.jpg", "images/1-1.png", "images/3.jpg" ];
//配列のインデックス添え字 let index=0;
//イベント関数を定義する function preImg(event){
 索引 - ;
 //ループ切り替えを実現する if (index<0)
 {
 インデックス=arrImg.length-1;
 }
 myImg.src = arrImg[インデックス];
}
関数 nextImg(イベント){
 インデックス++;
 //ループ切り替えを実現する if (index>arrImg.length-1)
 {
 インデックス=0;
 }
 myImg.src = arrImg[インデックス];
}

pre.addEventListener('click',preImg);
next.addEventListener('click',nextImg);