SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Enthusiast storkfmny's Avatar
    Join Date
    Mar 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I make this counter loop???

    I'm making my first website and have come to a block in the road so to speak. I have a few pages of html and css and now I need this counter that will loop between 1 and x, I will have to input x via the keyboard (user side). I would rather not use a prompt window but rather an input type textbox for the variable. When I click the stop button, I want this to write the number that the counter was stopped on and then start again and keep doing this same cycle over for ten times. I have spent three days trying to figure this javascript out and am getting a headache. Can someone point me in the right direction? Is there a better way of doing this or am I on the right track?
    Here's what I have so far...

    [code]
    <html>
    <head>
    <script type="text/javascript">
    var c=0;
    var t;
    var timer_is_on=0;

    function timedCount()
    {
    document.getElementById('txt').value=c;
    c=c+1;
    t=setTimeout("timedCount()",10);
    }

    function doTimer()
    {
    if (!timer_is_on)
    {
    timer_is_on=1;
    timedCount();
    }
    }

    function stopCount()
    {
    clearTimeout(t);
    timer_is_on=0;
    }
    </script>
    </head>

    <body>
    <form>
    <input type="button" value="Start count!" onclick="doTimer()"><br/>
    <input type="text" size="10" id="txt"><br/>
    <input type="button" value="Stop count!" onclick="stopCount()"><br/>
    </form>
    </body>
    </html>
    [code]
    I hope this is posted correctly!!! Thanks for any suggestions.

  2. #2
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var c=0;
    var t;
    var timer_is_on=0;
    var x=0;
    
    function timedCount()
    {
    c=c+1;
    t=setTimeout("timedCount()",10);
    }
    
    function doTimer()
    {
    if (!timer_is_on && x < 10)
    {
    timer_is_on=1;
    timedCount();
    }
    }
    
    function stopCount()
    {
    document.getElementById('txt').value=c;
    clearTimeout(t);
    timer_is_on=0;
    x++;
    if(x<10){doTimer();}
    }
    Is this what you mean? When you click Start count! the timer will start, but only display the value when you click Stop count!, at which point the counter will restart. You can click Stop count! 10 times before it will stop restarting the counter.

  3. #3
    SitePoint Enthusiast storkfmny's Avatar
    Join Date
    Mar 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was very tired when I posted this and didn't quite fully explain myself.
    What I'm trying to do is generate a random number of sorts between 1 and x without using the random number generator function. I need the counter to constantly loop between 1 and an input number, (I added an input button, but can't seem to make it work). When the stop button is clicked I want to document.write (on-screen) the number that the counter was on when stopped, and be able to do it ten times, (retrieve and write on the screen, ten numbers). So if I input var x as 50, the counter will let me pick ten numbers between 1 and 50. I need to be able to change the x, that's why the input box.
    I certainly appreciate the help you are giving me, I am new to all of this stuff and just need this counter real bad.
    Here's what I have, with an input box/button.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var c=0;
    var t;
    var timer_is_on=0;
    document.getElementById('var x').value=x;
    function timedCount()
    {
    document.getElementById('txt').value=c;
    c=c+1;
    t=setTimeout("timedCount()",10);
    }

    function doTimer()
    {
    if (!timer_is_on)
    {
    timer_is_on=1;
    timedCount();
    }
    }

    function stopCount()
    {
    clearTimeout(t);
    timer_is_on=0;
    }
    </script>
    </head>

    <body>
    <form>
    <input type="txt" name="var x" size="4" style="border: 5px solid rgb(126, 157, 185); padding: 2px;"><br/>
    <input type="submit" style="" value="Enter X" name="var x;"><br/>
    <input type="button" value="Start" onclick="doTimer()"><br/>
    <input type="text" size="4" style="border: 5px solid rgb(126, 157, 185); padding: 2px;" id="txt"><br/>
    <input type="button" value="Stop" onclick="stopCount()">
    </form>
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Is this any closer?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var t;
    var c=0;
    var i=1;
    
    function start_counter(){
    	if(i <= 10){
    		var input = document.getElementById('input').value;
    		c++;
    		document.getElementById('output' + i).value = c;
    		if(c>input) c=0;
    		t = setTimeout("counter()", 10);
    	}
    }
    
    function stop_counter(){
    	clearTimeout(t);
    	document.getElementById('output' + i).value = c;
    	i++;
    	counter();
    }
    </script>
    </head>
    <form>
    	<div>
    		<label for="input">Input number: </label>
    		<input type="text" id="input">
    	</div>
    	<input type="text" id="output1"><br>
    	<input type="text" id="output2"><br>
    	<input type="text" id="output3"><br>
    	<input type="text" id="output4"><br>
    	<input type="text" id="output5"><br>
    	<input type="text" id="output6"><br>
    	<input type="text" id="output7"><br>
    	<input type="text" id="output8"><br>
    	<input type="text" id="output9"><br>
    	<input type="text" id="output10"><br>
    	<input type="button" onclick="start_counter()" value="Start Counter!">
    	<input type="button" onclick="stop_counter()" value="Stop Counter!">
    </body>
    </html>

  5. #5
    SitePoint Enthusiast storkfmny's Avatar
    Join Date
    Mar 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Getting closer, looks like you've been doing this a while but I'm not explaining what I need clearly enough, let me try again. As you have it now, when I click start, number 1 appears in the first textbox and click stop resets the counter and click start again and number 2 appears in the second box and continues all the way up to 10.
    What I need it to do is:
    1.) Enter a number in the enter box and click start.
    2.) I need the counter to loop between 1 and (variable), endless loop until stop clicked.
    3.) On stop, the number that the counter is on when stopped, between 1 and (variable), will be written to the page.

    This might make it easier to understand.....
    Think of the counter as a kind of lottery number picker, The counter will loop between 1 and input value and stop on a number when the stop button is clicked and return that number to the page.
    Thanks for you're time!!!

  6. #6
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry, there's a couple of errors on the script. All appearances of the function counter(), need to be changed to start_counter();

    There's one on the last line of the start_counter() function: t = setTimeout("start_counter()", 10), and one on the last line of the stop_counter() function: start_counter().

    Code:
    function start_counter(){
    	if(i <= 10){
    		var input = document.getElementById('input').value;
    		c++;
    		document.getElementById('output' + i).value = c;
    		if(c>input) c=0;
    		t = setTimeout("start_counter()", 10);  //change this line
    	}
    }
    
    function stop_counter(){
    	clearTimeout(t);
    	document.getElementById('output' + i).value = c;
    	i++;
    	start_counter(); //change this line
    }
    Hopefully that's what you want.
    Last edited by mickyginger; Mar 27, 2012 at 04:33. Reason: Errors in script

  7. #7
    SitePoint Enthusiast storkfmny's Avatar
    Join Date
    Mar 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up THANK YOU SOOOO MUCH!!!!!!!!

    Quote Originally Posted by mickyginger View Post
    Sorry, there's a couple of errors on the script. All appearances of the function counter(), need to be changed to start_counter();

    There's one on the last line of the start_counter() function: t = setTimeout("start_counter()", 10), and one on the last line of the stop_counter() function: start_counter().

    Code:
    function start_counter(){
    	if(i <= 10){
    		var input = document.getElementById('input').value;
    		c++;
    		document.getElementById('output' + i).value = c;
    		if(c>input) c=0;
    		t = setTimeout("start_counter()", 10);  //change this line
    	}
    }
    
    function stop_counter(){
    	clearTimeout(t);
    	document.getElementById('output' + i).value = c;
    	i++;
    	start_counter(); //change this line
    }
    Hopefully that's what you want.
    I've been trying for days and everything I did would not work, you did it in your sleep! That is perfect!!!
    You made my day my friend. I appreciate all the time you put into this thing, it was holding me up with work on my site, I thank you again and have a good day.

  8. #8
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Your welcome.

    If you want me to explain how it works just drop me a line.

    Best,
    Mike


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •