When ever I try to click on the image, the image changes but the next image in the array is not displayed
<!doctype html>
<html>
<head>
<title>
slides
</title>
<script type="text/javascript">
function nextslide(){
var images = new Array()
images[0]= "home.jpg"
images[1]= "left.jpg"
images[2]= "right.jpg"
var currentpic=0
var lastpic= images.lenth-1;
if (currentpic =lastpic)
{
currentpic=0;
document.getElementById('slide').src = images[currentpic];
}else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
Help would be greatly appreciated.
Thank you for the help.
There are several things wrong with your code. Here is the fixed version:
<!doctype html>
<html>
<head>
<title>slides</title>
<script type="text/javascript">
var images = new Array();
images[0] = "home.jpg";
images[1] = "left.jpg";
images[2] = "right.jpg";
var currentpic = 0;
var lastpic = images.length-1;
function nextslide()
{
if (currentpic == lastpic)
{
currentpic = 0;
document.getElementById('slide').src = images[currentpic];
}
else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
What's wrong?
var lastpic= images.lenth-1;
You're missing a g
in length
.
if (currentpic =lastpic)
To check if var1
is the same as var2
, you need to use ==
instead of =
- You're missing a couple of semicolons.
- You should declare
currentpic
, images
, and lastpic
outside of your function to make it actually set the image as the next image.
To try and debug yourself
Always check your browser's developer console for errors.
try this
1.) Specify globallythis variable
var currentpic=0;
2.) Change in images.lenth to images.length
3.) Change if (currentpic =lastpic) to if (currentpic ==lastpic)
<!doctype html>
<html>
<head>
<title>
slides
</title>
<script type="text/javascript">
var currentpic=0;
function nextslide(){
var images = new Array()
images[0]= "http://thewowstyle.com/wp-content/uploads/2015/04/Cartoon.jpg"
images[1]= "http://vignette2.wikia.nocookie.net/epicrapbattlesofhistory/images/1/10/Penguin-cartoon.png/revision/latest?cb=20141207223335"
images[2]= "http://cliparts.co/cliparts/kiK/Byz/kiKByzxoT.jpg"
var lastpic= images.length-1;
if (currentpic ==lastpic)
{
currentpic=0;
document.getElementById('slide').src = images[currentpic];
}else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>