單擊數組中的圖像如何移動到鏈接（URL）？

Question

如果我的 html 是：

 <div>
 <input type="image" id = "mainImg> <br />
 </div>

 <div>
 <input type="image" class = Button src = "buttonImg.jpg" onclick="showImage()">
 </div>

我的 javascript 是：

var imgArray = new Array ();
imgArray[0] = "image1.jpg"
imgArray[1] = "image2.jpg"
imgArray[2] = "image3.jpg"
imgArray[3] = "image4.jpg"
imgArray[4] = "image5.jpg"

var linkArray = new Array ();
linkArray[0] = "https://link1.com"
linkArray[1] = "https://link2.com"
linkArray[2] = "https://link3.com"
linkArray[3] = "https://link4.com"
linkArray[4] = "https://link5.com"

function diceCast(){return Math.floor(Math.random()*5);};

function showImage(){
    
    var imgNum = diceCast();
    var objImg = document.getElementById("mainImg");
    objImg.src = imgArray[imgNum];

}

我要實現：

當我單擊“imgArray[0]”時 -> 加載新頁面（例如 _blank）“linkArray[0]”

我應該和'imgArray[imgNum] = linkArray[linkNum]'一樣嗎？ 那我該怎么辦？

或者教我如何使它更緊湊和更容易！

Answer 1

只需更改showImage function 以設置onclick屬性。

function showImage(){
    var imgNum = diceCast();
    var objImg = document.getElementById("mainImg");
    objImg.src = imgArray[imgNum];
    objImg.onclick = ()=>window.open(linkArray[imgNum], '_blank');
}