我正在尝试迭代图像数组，单独显示每个图像并使用按钮移至下一个图像。但是，当单击按钮时，它会移动到下一个图像，但在第二个图像之后，它不会移动到第三个图像，等等任何人都可以找到循环卡住的地方吗？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">
1 回答
眼眸繁星
TA贡献1873条经验 获得超9个赞
首先，范围。您currentImage应该全局声明，否则它将始终从 0 开始。其次，数组中最后一个元素的索引等于数组长度减 1，因此您需要currentImage检查imageArray.length - 1：
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">
添加回答
举报
0/150
提交
取消