setTimeOut !!!

**khaled450** · 11-09-2007, 11:25 AM

hi there,

I got this code from W3Schools and this is the link to the original code http://www.w3schools.com/js/tryit.as...iming_infinite and I played around with it, but I dont understand why isn't it working!!! I tried all ways!!!

<html>
<head>
<script type="text/javascript">
var d
var t
function a(name){
var c = name.txt1.value
timedCount(c)
}
function timedCount(d)
{
var x = d
document.getElementById('txt').value=x
x=x+1 // or x++
var l = x.value
document.getElementById('txt').value=x
t=setTimeout("timedCount(l)",1000)
}
</script>
</head>

<body>
<form name="next">
<input type="button" value="Start count!" onClick="a(this.form)">
<input type="text" id="txt">
<input type="text" id="txt1">
</form>
<p>Click on the button above. The input field will count for ever, starting at 0.</p>
</body>

</html>

thank you in advance.

**Twey** · 11-09-2007, 01:22 PM

The string you passed to setTimeout() is evaluated in the global scope, where l isn't defined. Use a closure:

Code:

setTimeout(function() { timedCount(l); }, 1000);

**khaled450** · 11-10-2007, 06:15 AM

thank you for your answer but I tried that code replasing setTimeOut in my code to the one you gave me but didnt work!

**jscheuer1** · 11-10-2007, 07:29 AM

Nothing wrong with Twey's advice here. The rest of your code just isn't working. What's this for anyway?

Try this:

Code:

<html>
<head>
<script type="text/javascript">
var d
var t
function a(name){
var c = name.txt1.value
timedCount(c)
}
function timedCount(d)
{
var x = d
document.getElementById('txt').value=x
x=x+1 // or x++
var l = x - 0;
document.getElementById('txt').value=x
t=setTimeout(function(){timedCount(l);},1000);
}
</script>
</head>

<body>
<form name="next">
<input type="button" value="Start count!" onClick="a(this.form)">
<input type="text" id="txt">
<input type="text" id="txt1">
</form>
<p>Click on the button above. The input field will count for ever, starting at 0.</p>
</body>

</html>

**jscheuer1** · 11-10-2007, 08:50 AM

And, this is how I would have written it:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Counter - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form action="javascript:void(0);" onsubmit="return false;">
<div><input type="button" value="Start Count!"
onclick="this.disabled = 1; var i = this.form.elements.txt, t =
function(x){i.value=x++;setTimeout(function(){t(x);},1000);};t(0);">
<input name="txt" readonly type="text"></div></form>
<p>Click the above button. It will count 'forever', starting at 0.</p>
</body>
</html>

**khaled450** · 11-10-2007, 11:10 AM

Thanks a lot guys. John your code is almost perfect. Sorry that i haven't explained it yet, but what i was trying to reach is to get the variable from input2 and post it into input1 and start counting from there.
Ex: if i wrote 78 in input 2, once i click start, it should take that number and post it in input1 and count 78, 79, 80 ... etc.

It's stupid but I am learning.

**jscheuer1** · 11-10-2007, 03:53 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Counter - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form action="javascript:void(0);" onsubmit="return false;">
<div><input type="button" value="Start Count!" onclick="var o = this.onclick,
e=this.form.elements,v='value',x; if(isNaN(x=e.txt1[v]-0)){x=0};e.txt[v]=x++;
if(o.t){clearInterval(o.t)};o.t=setInterval(function(){e.txt[v]=x++;}, 1000);">
<input name="txt" readonly type="text">
<div>Click the above button. It will count 'forever', starting at:</div>
<input name="txt1" type="text" value="0"></div></form>
</body>
</html>

**Twey** · 11-10-2007, 05:36 PM

OK, this code is now long past the length where it requires formatting

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Counter - Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  </head>
  <body>
    <form action="javascript:void(0);" onsubmit="return false;">
      <div>
        <input
            type="button"
            value="Start Count!"
            onclick="
              var o = this.onclick,
                e = this.form.elements,
                v = 'value',
                x;

              if(isNaN(x = +e.txt1[v]))
                x = 0;

              e.txt[v] = x++;

              if(o.t)
                clearInterval(o.t);

              o.t = setInterval(function() {
                e.txt[v] = x++;
              }, 1000);">
        <input name="txt" type="text" readonly>
        <p>Click the above button. It will count 'forever', starting at:</p>
        <input name="txt1" type="text" value="0">
      </div>
    </form>
  </body>
</html>

Don't forget that just because we can parse a big chunk of unformatted code, doesn't mean that the original poster can -- and this one even made me look twice

I thought you were a detractor of unnecessary braces?

**jscheuer1** · 11-10-2007, 06:02 PM

I like braces in close quarters. Sometimes they are required there. Rather than guess, I just throw them in.

I don't think that's quite how I would have written out a long version, but thanks Twey. It should be a little easier to follow like that. For one, if I were bothering to 'go longhand', I would have moved the script code to a function in the head, changing a references or two in it, passing the input to it as 'this', its sole argument.

**jscheuer1** · 11-11-2007, 09:07 PM

I was a little bored, so I made my own annotated version of my code, with some extra markup and styles thrown in as 'eye candy', or whatever (only the script code is annotated):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Counter - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
fieldset {
width:21.5em;
}
#inner {
padding-top:1ex;
}
form {
margin:0;
padding:0;
}
</style>
<script type="text/javascript">
function counter(el){
var o=el.onclick, //create a reference to the element's onclick function for later shorthand use.
e=el.form.elements, //condense the verbose and reused multi-object lookup for the form's elemnts for later shorthand use.
v='value', //create a reference to the value attribute for later shorthand use.
x; //declare x for later use.
if(isNaN(x= +e.txt1[v])) //with below line tests if the value of the txt1 input can be number.
x=0; //if so, it assigns it to x, otherwise sets x to 0.
e.txt[v]=x++; //sets the txt input's value to x, while at the same time incrementing it for its next use.
if(o.t) //with below line - if we are already running,
clearInterval(o.t); //stop to clear the way for a new run.
o.t=setInterval(function(){e.txt[v]=x++;}, 1000); //set a reference to and initiate the repeating loop of
//updating by 1 both x and the txt input's value.
};
</script>
</head>
<body>
<form action="javascript:void(0);" onsubmit="return false;">
<fieldset>
<legend>Counter</legend>
<div id="inner">
<input type="button" value="Start Count!" onclick="counter(this)">
<input name="txt" readonly type="text">
<div>Click the above button. It will count 'forever', starting at:</div>
<input name="txt1" type="text" value="0">
</div>
</fieldset>
</form>
</body>
</html>

Thread: setTimeOut !!!

Thread Tools

Search Thread

setTimeOut !!!

Bookmarks

Bookmarks

Posting Permissions