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
    911
    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.
    I Love coding...
    Don't click this link.

  2. #2
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    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.
    I Love coding...
    Don't click this link.

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,051
    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,051
    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
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    But why the last value is not also printed?
    I Love coding...
    Don't click this link.

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

    Why do you hate other codes?
    I Love coding...
    Don't click this link.

  8. #8
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    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.
    I Love coding...
    Don't click this link.

  9. #9
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    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'));
    	}
    I Love coding...
    Don't click this link.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,343
    Mentioned
    179 Post(s)
    Tagged
    9 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
  •