why does the slideshow not work? <!DOCTYPE html> <html> <head> <meta charset=\"u
ID: 3821142 • Letter: W
Question
why does the slideshow not work?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Final Project</title>
<script>
var timer_on=false
function changeImage(aPic){
document.getElementById("img5").src=aPic.src;
document.getElementById("display").innerHTML=aPic.alt;}
function startSlideshow(imgCount) {
if (timer_on==false) {
return}
var addOn=document.getElementById("img1"+imgCount);
changeImage(addOn);
new_imgCount=imgCount+1;
if(new_imgCount>4) {
new_imgCount=1
}
setTimeout("startSlideshow(new_imgCount)",2000)}
function open1(){
document.getElementById("navigation").style.width="100%";
}
function close2(){
document.getElementById("navigation").style.width="0%";
}
</script>
<style>
.navigation {
position: relative
display:inline:
overflow: hidden;
opacity: 0.5;
border:1px solid #000000;
-moz-box-shadow:0 1px 1px #000000;
-webkit-box-shadow:0 1px 1px #000000;
box-shadow:0 1px 1px #000000;
background-color:#EBB035
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.line{
height:1px;
background-color:#000000;
border-bottom:1px solid #000000;
margin:1em 0;
}
.body{
border:1px solid #000000;
-moz-box-shadow:0 1px 1px #000000;
-webkit-box-shadow:0 1px 1px #000000;
box-shadow:0 1px 1px #000000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background-color:#ADD8E6;
padding: 10px;
body {
margin:0px;
margin: auto;
display: inline;
background-color:#D0C6B1;
}
</style>
<link rel="stylesheet" type="text/css" href="final css.css">
</head>
<body>
<div id="navigation" class="navigation_class">
<a id="anchor" href="#">Close</a>
<div class="d2"><a href="page 2.html">Favorite Food</a></div>
<div class="d3"><a href="page 3.html">Video library</a></div>
<div class="d4"><a href="page 4.html">Summary page</a></div>
</div>
<span><h3>Menu</h3></span>
<div class="line"></div>
<div class="body">
<div id="pageContent">
<center>
<table>
<tr>
<th colspan="4">Click on an image to enlarge</th>
</tr>
<tr id="row2">
<td> <img src="All_Images/capstone.jpg" alt="capstone" height="100" width="100" id="img1"></td>
<td> <img src="All_Images/RusselHouse.jpg" alt="RusselHouse" height="100" width="100" id="img2"></td>
<td> <img src="All_Images/DarlaMoore.jpg" alt="DarlaMoore" height="100" width="100" id="img3"></td>
<td> <img src="All_Images/willyb.jpg" alt="WilliamsBrice" height="100" width="100" id="img4"></td>
</tr>
<tr>
<td colspan="4"><img src="All_Images/USC.jpg" alt="USC" id="img5" height="400" width="400"
</tr>
<tr>
<td colspan="4" id="display"> </td>
</tr>
<tr>
<td colspan="4"><input type="button" value="Start Slideshow"></td>
</tr>
<tr>
<td colspan="4"><input type="button" value="Stop Slideshow"></td>
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
Explanation / Answer
IN startslideShow function, you are using: var addOn=document.getElementById("img1"+imgCount);
instead of img1, it should be img only..
like: var addOn=document.getElementById("img"+imgCount);
Complete Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Final Project</title>
<script>
var timer_on=false
function changeImage(aPic){
console.log(aPic);
document.getElementById("img5").src=aPic.src;
document.getElementById("display").innerHTML=aPic.alt;
}
function startSlideshow(imgCount) {
if (timer_on==false) {
return
}
var addOn=document.getElementById("img"+imgCount);
changeImage(addOn);
new_imgCount=imgCount+1;
if(new_imgCount > 4) {
new_imgCount=1
}
setTimeout("startSlideshow(new_imgCount)",2000)
}
function open1(){
document.getElementById("navigation").style.width="100%";
}
function close2(){
document.getElementById("navigation").style.width="0%";
}
</script>
<style>
.navigation {
position: relative
display:inline:
overflow: hidden;
opacity: 0.5;
border:1px solid #000000;
-moz-box-shadow:0 1px 1px #000000;
-webkit-box-shadow:0 1px 1px #000000;
box-shadow:0 1px 1px #000000;
background-color:#EBB035
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.line{
height:1px;
background-color:#000000;
border-bottom:1px solid #000000;
margin:1em 0;
}
.body{
border:1px solid #000000;
-moz-box-shadow:0 1px 1px #000000;
-webkit-box-shadow:0 1px 1px #000000;
box-shadow:0 1px 1px #000000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background-color:#ADD8E6;
padding: 10px;
body {
margin:0px;
margin: auto;
display: inline;
background-color:#D0C6B1;
}
</style>
<link rel="stylesheet" type="text/css" href="final css.css">
</head>
<body>
<div id="navigation" class="navigation_class">
<a id="anchor" href="#">Close</a>
<div class="d2"><a href="page 2.html">Favorite Food</a></div>
<div class="d3"><a href="page 3.html">Video library</a></div>
<div class="d4"><a href="page 4.html">Summary page</a></div>
</div>
<span>
<h3>Menu</h3>
</span>
<div class="line"></div>
<div class="body">
<div id="pageContent">
<center>
<table>
<tr>
<th colspan="4">Click on an image to enlarge</th>
</tr>
<tr id="row2">
<td> <img src="https://image.flaticon.com/icons/svg/281/281764.svg" alt="capstone" height="100" width="100" id="img1"></td>
<td> <img src="https://image.flaticon.com/icons/svg/281/281765.svg" alt="RusselHouse" height="100" width="100" id="img2"></td>
<td> <img src="https://image.flaticon.com/icons/svg/281/281766.svg" alt="DarlaMoore" height="100" width="100" id="img3"></td>
<td> <img src="https://image.flaticon.com/icons/svg/281/281767.svg" alt="WilliamsBrice" height="100" width="100" id="img4"></td>
</tr>
<tr>
<td colspan="4"><img src="https://image.flaticon.com/icons/svg/281/281768.svg" alt="USC" id="img5" height="400" width="400"
</tr>
<tr>
<td colspan="4" id="display"> </td>
</tr>
<tr>
<td colspan="4"><input type="button" value="Start Slideshow"></td>
</tr>
<tr>
<td colspan="4"><input type="button" value="Stop Slideshow"></td>
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.