I am trying to iterate through an image array, displaying each image individually and using a button to move onto the next. However, when the button is clicked it moves onto the next image, but after the second image, it does not move onto the 3rd etc Can anyone find where the loop is getting stuck?
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">