I have a program that is suppose to change images along with the the description of the image. Currently the images will change, but the description will not. What is the issue?
Code:
var theimages = ["Images/Cordoba.jpg", "Images/delorean.jpeg", "Images/duster.jpg", "Images/FuryIII.jpg", "Images/laser.jpg", "Images/Monaco.jpg", "Images/mustang.jpg", "Images/Newport.jpg", "Images/Satellite.jpg", "Images/Scamp.jpg"];
var imageinfo = ["This is a 1977 Chrysler Cordoba", "This is a 1982 DMC-12 Delorean", "This is a 1974 Plymouth Gold Duster", "This is a 1974 FuryIII", "This is a 1984 Chrysler Laser", "This is a 1975 Dodge Monaco", "This is a 1976 Ford Mustang", "This is a 1978 Chrysler Newport", "This is a 1972 Plymouth Satellite", "This is a 1972 Plymouth Scamp"];
var myImage = document.getElementById("carpicholder");
var myImageDesc = document.getElementById("carinfo");
var imageIndex = 0;
var imagedescription = 0;
function NextImage() {
//document.getElementById("carpicholder").src = theimages;
myImage.setAttribute("src", theimages[imageIndex]);
imageIndex = (imageIndex + 1) % theimages.length;
myImageDesc.setAttribute("innerHTML", imageinfo[imagedescription]);
imagedescription = (imagedescription + 1) % imageinfo.length;
}<body>
<img src="Images/Cordoba.jpg" id="carpicholder" width="700" height="500" />
<br>
<br>
<input id="Button1" type="button" value="Next Image" onclick="NextImage()" />
<input id="Button2" type="button" value="Auto-Scrolling" onclick="Timing()" />
<input id="Button3" type="button" value="Stop Auto-Scrolling" onclick="Stop()" />
<br>
<br>
<div id="carinfo">This is a 1977 Chrysler Cordoba</div>