Javascript: Changing text inside a table with setInterval

**b1randon** · Jan 8 '07, 07:44 PM

Originally posted by Pete90

I am trying to change the text continously for the text inside a table but it stops after reaching the 2nd index in the array. Anyone can debug? Below are the coding:

<script language="javas cript">

var i=0;
var text=["Chocolate" , "Vanilla", "Strawberry "];

function dhtml(){
document.write( "<table border='1' color='black'>" );
document.write( "<tr align='center' bgcolor='grey'> ");
document.write( "<td colspan='300'>" );
document.write( "<font size='10' color='red'><b> ");
// if(i >= 3) {
// i = 0;}
document.write( text[i]);
document.write( "</b></font>");
document.write( "</td>");
document.write( "</table>"); i++;}

setInterval('dh tml()', 1000);
dhtml();
// clearInterval(i d);

</script>

You're reloading the page every time so you reinitialize everything. You want to be doing something like this:

Code:

var i=0;
var text=["Chocolate", "Vanilla", "Strawberry"];

function dhtml(){
	document.getElementById('container').innerHTML = text[i];
	i++;
	if(i>2)
		i=0;
}

setInterval('dhtml()', 1000);
dhtml();
// clearInterval(id);

AND
[HTML]
<html>
<head><script type="text/javascript" src="script.js" ></script></head>
<body onload="" id="body">
<table border='1' color='black'>
<tr align='center' bgcolor='grey'>
<td colspan='300'>
<font size='10' color='red'><b> <span id="container"> </span></b></font>
</td>
</tr>
</table>
</body>
</html>
[/HTML]
Better?

**Pete90** · Jan 9 '07, 07:13 AM

Originally posted by b1randon

You're reloading the page every time so you reinitialize everything. You want to be doing something like this:

Code:

var i=0;
var text=["Chocolate", "Vanilla", "Strawberry"];

function dhtml(){
	document.getElementById('container').innerHTML = text[i];
	i++;
	if(i>2)
		i=0;
}

setInterval('dhtml()', 1000);
dhtml();
// clearInterval(id);

AND
[HTML]
<html>
<head><script type="text/javascript" src="script.js" ></script></head>
<body onload="" id="body">
<table border='1' color='black'>
<tr align='center' bgcolor='grey'>
<td colspan='300'>
<font size='10' color='red'><b> <span id="container"> </span></b></font>
</td>
</tr>
</table>
</body>
</html>
[/HTML]
Better?

Thanks, you are right... the page is reloading everytime. Including the function body onload="dhtml() " , it works! I notice that you have included the sentence <script type="text/javascript" src="script.js" ></script> although <script language= "javascript "> seem to work fine too... i have always wonder what is the difference between them?

**acoder** · Jan 9 '07, 01:52 PM

Originally posted by Pete90

I notice that you have included the sentence <script type="text/javascript" src="script.js" ></script> although <script language= "javascript "> seem to work fine too... i have always wonder what is the difference between them?

Code:

src="script.js"

loads a javascript file called script.js whilst

Code:

<script language= "javascript">

actually contains javascript code within the tags on the actual page, like so:

Code:

<script language= "javascript">
<!--
//javascript code goes here
//-->
</script>

**b1randon** · Jan 9 '07, 03:02 PM

Originally posted by acoder

Code:

src="script.js"

loads a javascript file called script.js whilst

Code:

<script language= "javascript">

actually contains javascript code within the tags on the actual page, like so:

Code:

<script language= "javascript">
<!--
//javascript code goes here
//-->
</script>

Yup ^^ Thanks for the explanation, acoder.

Javascript: Changing text inside a table with setInterval

Javascript: Changing text inside a table with setInterval

Comment

Comment

Comment

Comment