i've attempted to make a very simple image gallery, which is functional for the most except for the back function. the next function loops around perfectly, but the back function includes a blank image (where it cant locate one), i think theres something wrong with my logic but im not sure where, if someone could point it out id be very grateful. the error message is :GET file:///G:/eject/undefined net::ERR_FILE_NOT_FOUND
var myImage= new Array();
myImage[1]="images/product/linkin.jpg";
myImage[2]="images/product/lisagerrard.jpg";
myImage[3]="images/product/maddy.jpg";
myImage[4]="images/product/mariah.jpg";
var image = 1;
function next()
{
image++;
document.getElementById("picture3").style.background = 'url(' + myImage[image] + ')';
if (image==4)
{
image = 0;
}
}
function back()
{
image--;
document.getElementById("picture3").style.background = 'url(' + myImage[image] + ')';
if (image== 0)
{
image = 5;
}
}
html :
<a id ="f1" onclick="back();return false;" href="#"> back </a> <a id ="f2" onclick="next();return false;" href="#"> next </a>
The issue is in the back function, you decrement the counter, then try to display the image before you do the out of bounds check. To resolve, move the out of bounds check to before you try to display the image:
function back()
{
image--;
if (image== 0)
{
image = 4; // also go to 4 not 5
}
document.getElementById("picture3").style.background = 'url(' + myImage[image] + ')';
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments