我有一個功能比需要的時間長一步。單擊影像 (elefant.png) 時，影像 (scale1.png) 會更改。有5張圖片，效果很好。問題是當顯示最后一張圖片時，我再次單擊（elefant.png）它會出現未定義的圖片？我不明白為什么它不只是停在最后一張圖片（scale5.png）上？
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div class="wrapper1">
<h2 id="title_text">Hey</h2>
<img src="image/scale1.png" id="getImage">
<img src="image/elefant.png" style="width:250px; height:auto;" onclick="imagefun()">
</div>
<script type="text/javascript">
var counter = 0,
gallery = ["image/scale2.png", "image/scale3.png", "image/scale4.png", "image/scale5.png"],
imagefun = function () {
document.getElementById("getImage").src = gallery[counter];
counter ;
if (counter >= 4) {
document.getElementById("title_text").innerHTML = "New text!";
}
};
</script>
</body>
</html>
這可能是一個簡單的解決方法，但我不擅長 javascript。我試圖尋找答案，但我不確定要尋找什么，因為我不知道是什么導致了問題？
uj5u.com熱心網友回復：
我不確定一旦你到達畫廊陣列的末尾，你的最終結果應該是什么，但就目前而言，它會將 title_text 更改為“新文本！”。
您的代碼的問題在于您總是增加計數器并根據該整數更改源 getImage 。一旦您的計數器達到 4，這不會停止。
我將使用陣列長度作為停止點，并且只增加計數器變數直到達到該限制。我會寫這樣的東西：
var counter = 0,
gallery = ["image/scale2.png", "image/scale3.png", "image/scale4.png", "image/scale5.png"],
imagefun = function () {
if (counter >= gallery.length) {
document.getElementById("title_text").innerHTML = "New text!";
}
else{
document.getElementById("getImage").src = gallery[counter];
counter ;
}
};<div class="wrapper1">
<h2 id="title_text">Hey</h2>
<img src="image/scale1.png" id="getImage">
<img src="image/elefant.png" style="width:250px; height:auto;" onclick="imagefun()">
</div>uj5u.com熱心網友回復：
您始終運行該函式并更改影像源，然后才檢查counter的值。這就是為什么即使計數器大于 3 它也會繼續前進并更改源的原因。
一種解決方案是counter有條件地更改的值：
if (counter < gallery.length - 1) {
counter ;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/322241.html
標籤：javascript html 功能