I'm currently working on implementing two functions that will allow me to navigate through an array of image sources and display them in my image view: nextImage() and previousImage(). Everything seems to work fine when I hardcode the num variable, but when I try to make it more dynamic by passing it as a parameter during window.onload, the functionality breaks. It only goes forward to number 1 and doesn't go backwards. Take a look at the code below. Any help would be greatly appreciated! - Alessandro
var num = 0;
var imagesArray1 = ["img/campionatigiovanili2018/img1.jpg", "img/campionatigiovanili2018/img2.jpg", "img/campionatigiovanili2018/img3.jpg"];
window.onload = function(){
let logo = document.getElementById('logo');
logo.addEventListener("click", function(){
window.location.href = "index.html";
});
document.getElementById('postImage1').setAttribute("src", imagesArray1[num]);
//Previous Image
document.getElementById('previousImage').addEventListener("click", function(){
previousImage("postImage1", imagesArray1, num);
});
document.getElementById('nextImage').addEventListener("click", function(){
nextImage("postImage1", imagesArray1, num);
});
};
function nextImage(postImage, imageArray, myVar){
if (myVar < 2) {
myVar = myVar + 1;
document.getElementById(postImage).setAttribute("src", imageArray[myVar]);
console.log(myVar);
} else {
}
};
function previousImage(postImage, imageArray, myVar){
if (myVar > 0) {
myVar = myVar - 1;
document.getElementById(postImage).setAttribute("src", imageArray[myVar]);
console.log(myVar);
} else {
};
}