Simple Counter?

JavaScript
1

Sorry for this noob question.
I’m still learning javascript.

What I want is to create a counter inside an input box.
This counter will count from 1 to 10 and display the result in input box.
The count will start when I press the button.
Using WHILE loop.

Hope someone will show me this simple codes.

Sorry noob here.

2

Okay here is what I did so far.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


</head>

<body>
<script type="text/javascript">

   function calculate() {
      var i = 0;
   
      while (i<10) {
	     document.getGetElementById('input1').value = i;
		 i++;
	  }
   }
</script>

<form name="form1" method="post" action="">
   <input type="text" name="counter" id="input1">
   <input type="button" value="count" id="button" onclick="calculate();">
</form>

</body>
</html>

The problem is it won’t display anything. Why?

Thank you very much in advanced.

3

Well document does not have a method named getGetElementById. The proper name is: getElementById. However, that does not result in the intended results. The while loop is going to run so quick that you won’t even notice the counter changing. All you will end up seeing is the last number. So what you really need to do is use setTimeout so that increment is seen.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


</head>

<body>

<form name="form1" method="post" action="">
   <input type="text" name="counter" id="input1">
   <input type="button" value="count" id="button" onclick="calculate();">
</form>

<script type="text/javascript">
   
function calculate() {

	var 
	i = 0,
	el = document.getElementById('input1'),
	step = function() {
		el.value = ++i;
		if(i != 10) {
			setTimeout(step,500);
		}
	};
	
	step();

}
   
</script>

</body>
</html>
4

Here is another version but more more fun.


function calculate() {
	(function(step,el) {
		(function() {
			el.value = ++step;
			if(step != 10) {
                          setTimeout(arguments.callee,500); 
                        }
		})();
	})(0,document.getElementById('input1'));
}
5

But why the last value is not also printed?

6

The while loop execution is going to be nearly instantaneous. There is no noticeable buffer in time between iteration for loops.

7

@oddz

Why do you hate other codes?

8

@oddz

Can you also help me apply the setTimeOut with WHILE loop.

Thank you oddz in advanced.

9

hi oddz

How do you increment these codes by 0.01 ?


function calculate() {
	(function(step,el) {
		(function() {
			el.value = ++step;
			if(step != 10) {
                          setTimeout(arguments.callee,500); 
                        }
		})();
	})(0,document.getElementById('input1'));
}

I tried it like these but it won’t increment,


	function calculate() {
		(function(step,el) {
			(function() {
				el.value = step + .01;
				if(step != 10) {
							  setTimeout(arguments.callee,10); 
							}
			})();
		})(0,document.getElementById('input1'));
	}
10

The problem with your approach is this line:

el.value = step + .01;

In oddz’s version you have:

el.value = ++step;

The plus plus before the variable name has the effect of increasing the variable and assigning the result of that increment to el.value, in your version you are just incrementing the value of el.value, not of step.

Change the above to this:

function calculate() {
  (function(step,el) {
    (function() {
      el.value = (step + 0.1).toFixed(1);
      step = step + 0.1;
      if(el.value != 10) {
        setTimeout(arguments.callee,500); 
      }
    })();
  })(0,document.getElementById('input1'));
}