There appears to be an issue with image(0) and image(1) in this array that I can't quite understand. The console output shows:
i=5; div class="five" id="slides"
i=0; div class="one" id="slides"
i=1; div class="one" id="slides"
Check out my codepen link
var i = 0;
var image = ["one", "two", "three", "four", "five"];
var slider = document.getElementById("slides");
function changeBG(direction) {
if(direction == "up"){
if(i != 5) {
slider.className = image[i];
console.log(i, slider);
i++;
}
else {
i = 0;
slider.className = image[i];
console.log(i, slider);
i++;
}
}
else {
if(i != -1) {
slider.className = image[i];
console.log(i, slider);
i--;
}
else {
i = 4;
slider.className = image[i];
console.log(i, slider);
i--;
}
}
console.log(direction);
}
Update: Upon checking the array, it consists of:
Array [ "one", "two", "three", "four", "five" ]
Further investigation reveals that when switching directions from 'up'' to 'down', the value of i unexpectedly increases instead of decreasing during the first call of changeBG(). Can someone shed some light on this?