By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,442 Members | 1,316 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,442 IT Pros & Developers. It's quick & easy.

setInterval problems?

P: 12
Hi,

I cobbled together this code to give me continuously changing text from one of (currently) two defined arrays. Needless to say I know nothing at all about Javascript and so, when things go wrong, I need help finding out why, and what to do about it...

The code itself actually works fine, but when I try it in w3schools' TryIt Editor a message in the status bar saying "Error on page" although, practically speaking, there appears to be no problem.

Could anybody have a look through the following and tell me if there's anything I can do to make my status bar happy?

Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2.  
  3. var m=0;
  4. var text=["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"];
  5.  
  6. function dhtml(){
  7. document.getElementById('first').innerHTML = text[m];
  8. m++;
  9. if(m>10)
  10. m=0;
  11. }
  12.  
  13. setInterval('dhtml()', 250);
  14. dhtml();
  15. // clearInterval(id);
  16.  
  17. </script>
  18.  
  19. <script language="javascript">
  20.  
  21. var n=0;
  22. var two=["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
  23.  
  24. function any(){
  25. document.getElementById('second').innerHTML = two[n];
  26. n++;
  27. if(n>9)
  28. n=0;
  29. }
  30.  
  31. setInterval('any()', 2500);
  32. any();
  33. // clearInterval(id);
  34.  
  35. </script>
  36.  
  37. <html>
  38. <head>
  39. <table>
  40. <tr align='center' bgcolor='black' height=200px>
  41. <td align='center' width=200px>
  42. <font style='font-size:27; color:white; font-family:arial'><b>
  43. <script language="javascript" type="text/javascript">
  44. function random_text()
  45. {};
  46. var random_text = new random_text();
  47. var number = 0;
  48. random_text[number++] = "<span id=first>"
  49. random_text[number++] = "<span id=second>"
  50. var random_number = Math.floor(Math.random() * number);
  51. document.write(random_text[random_number])
  52. </script>
  53. </span></b></font>
  54. </td>
  55. </tr>
  56. </table> 
  57. </body>
  58. </html>
Thanks,

Hannah
Oct 23 '07 #1
Share this Question
Share on Google+
4 Replies


Ferris
100+
P: 101
Hi:

the problem is you just create only one span,look at your code

[HTML]
<font style='font-size:27; color:white; font-family:arial'><b>
<script language="javascript" type="text/javascript">
function random_text()
{};
var random_text = new random_text();
var number = 0;
random_text[number++] = "<span id=first>"
random_text[number++] = "<span id=second>"
var random_number = Math.floor(Math.random() * number);
document.write(random_text[random_number])
</script>

</span></b></font>
[/HTML]

you just create one span.which span?maybe "first" or maybe"second",it depends on random_number,but only one created.

and look at here...


[HTML]
document.getElementById('first').innerHTML = text[m];
......
document.getElementById('second').innerHTML = two[n];
[/HTML]

you want to print alpha in span "first",and digit in span "secode",but there's only one span,so,error occors.



I don't know why you define the empty function "random_text".and I also don't understand why you define two spans ,I think one span can work perfectly,so I changed the code as below:

[HTML]


<html>
<head>
</head>
<script language="javascript">
var m=0;
var text=["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"];
function dhtml(){
document.getElementById('out').innerHTML = text[m];
m++;
if(m>10)
m=0;
}
setInterval('dhtml()', 250);
//dhtml();
// clearInterval(id);
</script>

<script language="javascript">
var n=0;
var two=["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
function any(){
document.getElementById('out').innerHTML = two[n];
n++;
if(n>9)
n=0;
}
setInterval('any()', 2500);
//any();
// clearInterval(id);
</script>
<body>
<table>
<tr align='center' bgcolor='black' height=200px>
<td align='center' width=200px>
<font style='font-size:27; color:white; font-family:arial'><b>
<span id="out"></span>
</b></font>
</td>
</tr>
</table>
</body>
</html>
[/HTML]

there is no error occurs now,and you'll have a happy status bar.



by the way,look at the code:
setInterval('dhtml()', 250);
dhtml();

setInterval('dhtml()', 250); means js will call function "dhtml" every 250ms,so you needn't to write dhtml(); to call it again.


I wish it will help you.
Oct 23 '07 #2

P: 12
The reason I create two under different names is so that I can write a code that randomly picks one of them. I don't know another way of doing this, and the code you've written -- giving the two different spans the same name -- means that the same one gets selected each time. Thank you for the tips, though; I will remove the redundant parts from the code.

I've looked more closely at what happens when I use the code and the error message comes up in at two different times, depending on which span is selected:

-- If the chain 1, 2, 3 etc. gets selected, the error message comes up straight away although it still functions;
-- If the chain a, b, c etc. gets selected, the error message comes up after it has been through one cycle and reset to m=0.

Does this help identify the problem at all?
Oct 23 '07 #3

Ferris
100+
P: 101
Hi

-- If the chain 1, 2, 3 etc. gets selected, the error message comes up straight away although it still functions;
-- If the chain a, b, c etc. gets selected, the error message comes up after it has been through one cycle and reset to m=0.
this is because of these code:

setInterval('dhtml()', 250);
setInterval('any()', 2500);

you print out a,b,c every 250ms,but 1,2,3 is printed out every 2500ms,so a,b,c will be printed before 1,2,3.
if the span "second" is created,the error orrurs soon,because a,b,c has no span to be printed out.
if the span "first" is created,the error message will not comes up soon,because 1,2,3 will not be printed soon.when m =10,it means 250*10ms has gone, then 1 want to be printed out,but there's no span for 1,2,3 to print out.

you can change setInterval('any()', 2500); into setInterval('any()', 250); to see the difference.



if you want to randomly picking up one of two spans,you should ensure there're two spans exsisted,or you will get an error message.
you can surely create two different spans for your purpose,and you can hide one of them when you want to print.

here's the new code:

[HTML]
<html>
<head>
</head>
<script language="javascript">
var m=0;
var text=["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"];
function dhtml(){
document.getElementById('first').innerHTML = text[m];
document.getElementById('first').style.display = "";
document.getElementById('second').style.display = "none";
m++;
if(m>10)
m=0;
}
setInterval('dhtml()', 250);
//dhtml();
// clearInterval(id);
</script>

<script language="javascript">
var n=0;
var two=["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
function any(){
document.getElementById('second').innerHTML = two[n];
document.getElementById('second').style.display = "";
document.getElementById('first').style.display = "none";
n++;
if(n>9)
n=0;
}
setInterval('any()', 2500);
//any();
// clearInterval(id);
</script>
<body>
<table>
<tr align='center' bgcolor='black' height=200px>
<td align='center' width=200px>
<font style='font-size:27; color:white; font-family:arial'><b>
<span id="first"></span>
<span id="second"></span>
</b></font>
</td>
</tr>
</table>
</body>
</html>
[/HTML]
Oct 23 '07 #4

P: 12
The problem is that I want one span to be selected at random. This is because I am putting it in a page that uses templates in editing; an example of what I mean is:

Main Layout:

(variable to display a set of boxes, e.g. of links, extra information, etc.)

Box layout

(html to control the appearance of all such boxes)

and so on. So I can define what I want each box to look like but if I want to put in something different for each box, which I do, the only way I can do it is to create a random feature generator in the box layout. So the point is that under each box, for example, I want to put this code that displays a randomly selected chain of text that I will have defined, like a-b-c-d and so on, so that one box may have a-b-c and one box may have 1-2-3 underneath it. Does this help you understand why I need the function to choose a particular span at random?
Oct 26 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.