JavaScript changing an image and counter with setInterval

Question

So I am working on a homework assignment using JavaScript the problem I am having is creating the changeAd() function to replace the starting image in the table with one of the other images in the function after 5 seconds. I am fairly lost so any help or pointers are greatly appreciated! This is what I have so far:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CVR1</title>
</head>
<body onLoad="startAdPage()">
<script type="text/javascript">
/* <![CDATA[ */
function startAdPage() {
 setInterval(changAd(),5000);
 setInterval(startCountdown(),1000);
}
function changeAd() { 
 THIS NEEDS WORK should change the image every 5 seconds to replace the one in the table, i think this needs to be an array/list
 cvb1.gif;
 cvb2.gif;
 cvb3.gif;
}
var count() = 15;
function startCountdown() { 
 while count >= 0;
 THIS NEEDS WORK
 should change the value of textfield to countdown from 15 to 0 decrease by one each time it executes, when count reaches 0 clear both intervals and redirect browser to CVR2.html
}
/* ]]> */
</script>
<table>
  <tr>
    <td><img src="cvb1.gif"></td>
    <td><p>Advertisement</p><p>The Central Vally Realtors home page will be displayed in TEXTFIELD seconds.</p><p><a href="CVR2.html">Skip Advertisement</a></p></td> 
  </tr>
</table>
</body>
</html>

score 0 · Answer 1 · answered Oct 17 '14 at 04:46

First thing you should remove parentheses from the call to your functions in setInterval.
Secondly I assume you know how to declare an array to save names of your images, after this is done you can go here http://stackoverflow.com/questions/5915096/get-random-item-from-javascript-array to see how to get a random element from this array.
And finally to change the image in javascript you should refer here http://stackoverflow.com/questions/7312553/change-image-source-with-javascript.
I hope this helped.

score 0 · Accepted Answer · answered Oct 17 '14 at 15:18

This is the final working code I am going with, I don't think I am using the Textfield that is pointed to in the startCountdown function correctly but it works.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CVR1</title>
</head>
<body onLoad="startAdPage()">
<script type="text/javascript">
/* <![CDATA[ */
function startAdPage(){
 setInterval("changeAd()", 5000);
 setInterval("startCountdown()",1000);
}
pix = new Array();
 
pix[0] = "pictures/cvb2.gif";
pix[1] = "pictures/cvb3.gif";
pix[2] = "pictures/cvb1.gif";

var x = 0;

function changeAd(){
document.images.pic.src = pix[x];
x = x + 1;
if (x > (pix.length-1)) {x = 0} 
}

var messages = new Array(
 "15",
 "14",
 "13",
 "12",
 "11",
 "10",
 "9",
 "8",
 "7",
 "6",
 "5",
 "4",
 "3",
 "2",
 "1",
 "0"
);
var count = 1;
function startCountdown() {
 document.getElementById("timer").value = messages[count];
 if(count < messages.length -1){
  count++;
 }
 else {
  count = 0;
  location.assign ("CVR2.html");
 }
}
/* ]]> */
</script>

<table>
  <tr>
    <td><form><img name="pic" src="pictures/cvb1.gif"></form></td>
    <td><p>Advertisement</p><p>The Central Vally Realtors home page will be displayed in <form><input type="text" id="timer" value="15" /></form> seconds.</p><p><a href="CVR2.html">Skip Advertisement</a></p></td> 
  </tr>
</table>
</body>
</html>

JavaScript changing an image and counter with setInterval

2 Answers2