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…


<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>

I hope this is posted correctly!!! Thanks for any suggestions.


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.

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>

Is this any closer?


<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>

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!!!

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().


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.

Your welcome.

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

Best,
Mike

I figured it out by looking at your code, my syntax needs work!
I tried the same thing and didn’t quite get everything where it should’ve been and of course didn’t work.
Was driving me nuts…thanks again.