我正在尝试遍历一个图像数组，分别显示每个图像，并使用按钮移动到下一个图像。然而，当点击按钮时，它会移动到下一个图像，但在第二个图像之后，它不会移动到第三个图像等。有人能找到循环卡在哪里吗？
function changeImage() {
var imageArray = ["/Users/rate/images/images/practice/sun1.jpg", "/Users/rate/images/images/practice/sun2.jpg", "/Users/rate/images/images/practice/sun3.jpg", "/Users/rate/images/images/practice/sun4.jpg"]
var currentImage = 0;
currentImage += 1;
if (currentImage >= imageArray.length) {
currentImage = 0;
}
document.getElementById("mainImage").src = imageArray[currentImage]
}<!DOCTYPE html>
<html>
<head>
<title> App Icons? </title>
<link rel="stylesheet" type="text/css" href="/Users/Website/css/mainstyle.css">
<script type="text/javascript" src="/Users/rate/js/main.js"></script>
</head>
<body class="body">
<div>
<div>
<hr>
<div class=topbar>
<h1> Do you find this App Icon aesthically pleasing</h1>
</div>
<hr>
<div id=displayedImage> </div>
<img src="/Users/rate/images/images/practice/sun1.jpg" id="mainImage" />
<div id=answer>
<label> Strongly Agree </label>
<label><input type="radio" name="answer" value="1" required><span>1</span></label>
<label><input type="radio" name="answer" value="2" required><span>2</span></label>
<label><input type="radio" name="answer" value="3" required><span>3</span></label>
<label><input type="radio" name="answer" value="4" required><span>4</span></label>
<label><input type="radio" name="answer" value="5" required><span>5</span></label>
<label> Strongly disagree</label>
<hr>
</div>
<input type="button" onclick="changeImage()" value="I am complete">首先，作用域。您的currentImage应该全局声明，否则它将始终从0开始。其次，数组中最后一个元素的索引等于数组长度减1，因此需要对照imageArray.length - 1:检查currentImage
var currentImage = 0;
function changeImage() {
var imageArray = ["/Users/rate/images/images/practice/sun1.jpg", "/Users/rate/images/images/practice/sun2.jpg", "/Users/rate/images/images/practice/sun3.jpg", "/Users/rate/images/images/practice/sun4.jpg"]
if (currentImage >= imageArray.length - 1) {
currentImage = 0;
} else {
currentImage += 1;
}
document.getElementById("mainImage").src = imageArray[currentImage]
console.log(currentImage);
}<div>
<div>
<hr>
<div class=topbar>
<h1> Do you find this App Icon aesthically pleasing</h1>
</div>
<hr>
<div id=displayedImage> </div>
<img src="/Users/rate/images/images/practice/sun1.jpg" id="mainImage" />
<div id=answer>
<label> Strongly Agree </label>
<label><input type="radio" name="answer" value="1" required><span>1</span></label>
<label><input type="radio" name="answer" value="2" required><span>2</span></label>
<label><input type="radio" name="answer" value="3" required><span>3</span></label>
<label><input type="radio" name="answer" value="4" required><span>4</span></label>
<label><input type="radio" name="answer" value="5" required><span>5</span></label>
<label> Strongly disagree</label>
<hr>
</div>
<input type="button" onclick="changeImage()" value="I am complete">