Member Avatar for Sukanto

I am unable to debug the following code. I can't find any errors here.

I am getting the button but after clicking on it, only Time Remaining: 10000 msecs is being displayed.

In Firefox 2.0.0.3: I checked the error console, it shows timedCount is not defined on line t = setTimeout("timedCount()",200)

IE 7 : gives

Line: 1
Char: 1
Error: Object Expected
Code: 0

I also tried an example of setTimeout() from a website, it worked properly.

<html>
<head>
<script type="text/javascript">	
	var rem=0
	var t

	function startT(t)
	{
		rem = t
		timedCount()
	}

	function timedCount()
	{
		if(rem==0)
		{
			document.write("Time Over.<br>")
			return
		}
		document.write("Time Remaining: " + rem + " msecs.<br>")
		rem = rem - 1
		t = setTimeout("timedCount()",200)
		
	}
</script>
</head>
<body>
	<br>
	<input type="button" value="Start" onClick="startT(10000)">
</body>
</html>

Please help.

  • 3 Contributors
  • 7 Replies
  • 155 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Sukanto
Member Avatar for rgtaylor

Your problem here is that you are writing a new document when the button is clicked... the current document is closed, so the browser tries to do the document.write as a new document.

You should use some editable field, like using a text input field for output or a text area for output or an inline frame so you can write to it...

Member Avatar for rgtaylor

By the way, I checke dthe web site where you got the code from, but the code on that site won't runn right in most modern browsers...

Peace,

Member Avatar for Sukanto

Your problem here is that you are writing a new document when the button is clicked... the current document is closed, so the browser tries to do the document.write as a new document.

You should use some editable field, like using a text input field for output or a text area for output or an inline frame so you can write to it...

Thanks for the help rgtaylor.
Now, my code is running fine.

Thanks once again :)

Member Avatar for rgtaylor

Glad to hear it.... It took me a couple minutes to figure it out... basically by the time you did the call back to your function, the page no longer existsed, thus the function no longer existed.... these kinds of things can be tricky to figure out... I got the clue when I used view source and saw the 1 line output by itself.... ;-)

Good luck,

Member Avatar for Sukanto

Actually I didn't knew the proper working of document.write(), i.e it creates a new document every time you call it.

As I am not an HTML/Javascript programmer (basically interested in C, Java) , so never bothered to figure it out earlier.

Thanks once again.

Member Avatar for MattEvans

Document.write( ) only works reliably in the 'loading' period of your page. Something like this:

<html>
<body>
<h1>Title</h1>
<script>document.write("My page content");</script>
</body>
</html>

Will work how you might expect; but calling document.write( ) after the loading context ( i.e. from a user-invoked event like clicking a button ) has that effect of re-writing your page entirely. I don't know whether that's the officially specified behaviour, but most browsers do that.

document.write( ) is a frowned upon technique these days. anything you can do with it can be done using a server-side script, which can make efficient use of caching; and doesn't depend on the client end to perform page generation.

You can use code as below to get 'seamless' output on a page; this is equivalent to putting the output in a textfield/box/iframe, but the output text won't have special wrapping/rendering rules:

<html>
<head>
<script type="text/javascript">	
	var rem=0
	var t
 
	function startT(t)
	{
		rem = t
		timedCount()
	}
 
	function timedCount()
	{
		if(rem==0)
		{
			document.write("Time Over.")
			return
		}
		[B]document.getElementById("output").innerHTML = "Time Remaining: " + rem + " msecs."[/B]
		rem = rem - 1
		t = setTimeout("timedCount()",200)
		
	}
</script>
</head>
<body>
	
	<input type="button" value="Start" onClick="startT(10000)">

[B]<span id="output">?</span>[/B]
</body>
</html>
Member Avatar for Sukanto

Document.write( ) only works reliably in the 'loading' period of your page. Something like this:

<html>
<body>
<h1>Title</h1>
<script>document.write("My page content");</script>
</body>
</html>

Will work how you might expect; but calling document.write( ) after the loading context ( i.e. from a user-invoked event like clicking a button ) has that effect of re-writing your page entirely. I don't know whether that's the officially specified behaviour, but most browsers do that.

document.write( ) is a frowned upon technique these days. anything you can do with it can be done using a server-side script, which can make efficient use of caching; and doesn't depend on the client end to perform page generation.

Thanks MattEvans :-)

You can use code as below to get 'seamless' output on a page; this is equivalent to putting the output in a textfield/box/iframe, but the output text won't have special wrapping/rendering rules:

<html>
<head>
<script type="text/javascript">	
	var rem=0
	var t
 
	function startT(t)
	{
		rem = t
		timedCount()
	}
 
	function timedCount()
	{
		if(rem==0)
		{
			document.write("Time Over.")
			return
		}
		[B]document.getElementById("output").innerHTML = "Time Remaining: " + rem + " msecs."[/B]
		rem = rem - 1
		t = setTimeout("timedCount()",200)
		
	}
</script>
</head>
<body>
	
	<input type="button" value="Start" onClick="startT(10000)">

[B]<span id="output">?</span>[/B]
</body>
</html>

After getting the reply from rgtaylor I applied the same workaround ;-)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.