I\'m having trouble with some HTML and Javascript. I\'m supposed to make a slide
ID: 3691793 • Letter: I
Question
I'm having trouble with some HTML and Javascript. I'm supposed to make a slideshow of 6 images. It's 6 small images that when clicked on, show up full-sized in the main image area. There are also two buttons that start and stop the slideshow. The alt of the <img element is supposed to show up in the <th with id="desc" but that's not happening either. Can someone tell me what I'm doing wrong and fix my code?
<script>
timer_on=false;
function changeImage(dogImage) {
document.getElementById("mainIMG").src=dogImage.src;
<document.getElementById("desc").innerHTML=dogImage.alt;}
function startSlideshow(dogCount) {
if (timer_on==faluse){return}
pig=document.getElementById(dog + dogCount);
changeImage(pig);
new_dogCount=dogCount+1;
if (new_dogCount > 5) {new_dogCount = 1}
setTimeout ("startSlideshow(new_dogCount)", 2000) }
</script>
<table>
<tr>
<th colspan="6"> Click on an Image to Enlarge </th>
</tr>
<tr>
<td> <img src="anotha1.jpg" width="100" height="100" alt="Picture of Me" id="me"> </td>
<td> <img src="bropic.jpg" width="100" height="100" alt="My brother and I" id="bro"> </td>
<td> <img src="mompic.jpg" width="100" height="100" alt="My Mom and I" id="mom"> </td>
<td> <img src="dadpic.jpg" width="100" height="100" alt="My Dad and I" id="dad"> </td>
<td> <img src="bandpic.jpg" width="100" height="100" alt="Band Picture" id="band"> </td>
<td> <img src="prompic.jpg" width="100" height="100" alt="Prom Picture" id="prom"> </td>
</tr>
<tr>
<td colspan="6"> <img id="mainIMG" src="anotha1.jpg" alt="Me"> </td>
</tr>
<tr>
<th colspan="6" id="desc"> Me </th>
</tr>
<tr>
<td colspan="5"> <input type="button" value="Start Slideshow"> </td>
</tr>
<tr>
<td colspan="5"> <input type="button" value="Stop Slideshow"> </td>
</tr>
</table>
Explanation / Answer
you have < symbol on the second line of the function changeimage.
the ids of the images must be dog1,dog2,dog3 etc, where you are missing the logic.
find the below modified code which works fime.
-----------------------------------------------------------------------------
<html>
<body>
<script>
timer_on=false;
function changeImage(dogImage) {
document.getElementById("mainIMG").src=dogImage.src;
document.getElementById("desc").innerHTML=dogImage.alt;
}
function startSlideshow(dogCount) {
if (timer_on==false){return;}
pig=document.getElementById("dog"+dogCount);
changeImage(pig);
new_dogCount=dogCount+1;
if (new_dogCount > 5) {new_dogCount = 1;}
setTimeout ("startSlideshow(new_dogCount)", 2000);
}
</script>
<table>
<tr>
<th colspan="6"> Click on an Image to Enlarge </th>
</tr>
<tr>
<td> <img src="anotha1.jpg" width="100" height="100" title="Picture of Me" id="dog1"> </td>
<td> <img src="bropic.jpg" width="100" height="100" title="My brother and I" id="dog2"> </td>
<td> <img src="mompic.jpg" width="100" height="100" title="My Mom and I" id="dog3"> </td>
<td> <img src="dadpic.jpg" width="100" height="100" title="My Dad and I" id="dog4"> </td>
<td> <img src="bandpic.jpg" width="100" height="100" title="Band Picture" id="dog5"> </td>
<td> <img src="prompic.jpg" width="100" height="100" title="Prom Picture" id="dog6"> </td>
</tr>
<tr>
<td colspan="6"> <img id="mainIMG" src="anotha1.jpg" alt="Me"> </td>
</tr>
<tr>
<th colspan="6" id="desc"> Me </th>
</tr>
<tr>
<td colspan="5"> <input type="button" value="StartSlideshow"> </td>
</tr>
<tr>
<td colspan="5"> <input type="button" value="Stop Slideshow"> </td>
</tr>
</table>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.