SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Simple Counter?

  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    933
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Simple Counter?

    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.
    Quality codes are optimized and tested...
    Click here for inspiration..

  2. #2
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    933
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Okay here is what I did so far.

    Code:
    <!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.
    Quality codes are optimized and tested...
    Click here for inspiration..

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,146
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    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.

    Code JavaScript:
    <!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>
    The only code I hate more than my own is everyone else's.

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,146
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Here is another version but more more fun.

    Code JavaScript:
    function calculate() {
    	(function(step,el) {
    		(function() {
    			el.value = ++step;
    			if(step != 10) {
                              setTimeout(arguments.callee,500); 
                            }
    		})();
    	})(0,document.getElementById('input1'));
    }
    The only code I hate more than my own is everyone else's.

  5. #5
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    933
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    But why the last value is not also printed?
    Quality codes are optimized and tested...
    Click here for inspiration..

  6. #6
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,146
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    The while loop execution is going to be nearly instantaneous. There is no noticeable buffer in time between iteration for loops.
    The only code I hate more than my own is everyone else's.

  7. #7
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    933
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @oddz

    Why do you hate other codes?
    Quality codes are optimized and tested...
    Click here for inspiration..

  8. #8
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    933
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @oddz

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

    Thank you oddz in advanced.
    Quality codes are optimized and tested...
    Click here for inspiration..

  9. #9
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    933
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    hi oddz

    How do you increment these codes by 0.01 ?
    Code:
    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,
    Code:
    	function calculate() {
    		(function(step,el) {
    			(function() {
    				el.value = step + .01;
    				if(step != 10) {
    							  setTimeout(arguments.callee,10); 
    							}
    			})();
    		})(0,document.getElementById('input1'));
    	}
    Quality codes are optimized and tested...
    Click here for inspiration..

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by solidcodes View Post
    How do you increment these codes by 0.01 ?

    ...

    I tried it like these but it won't increment,
    The problem with your approach is this line:

    Code JavaScript:
    el.value = step + .01;

    In oddz's version you have:

    Code JavaScript:
    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:

    Code JavaScript:
    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'));
    }


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
  •