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>

JordanWD · Accepted Answer · 2014-10-17 04:46:35Z

0

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.

answered Oct 17, 2014 at 4:46

JordanWD

714 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zack · Accepted Answer · 2014-10-17 15:18:34Z

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>

Collectives™ on Stack Overflow

JavaScript changing an image and counter with setInterval

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related