SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist Fergal's Avatar
    Join Date
    Nov 2003
    Location
    Ireland
    Posts
    492
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to count the number of times a button is clicked?

    I tried to write a script that increments a variable value, every time a button is clicked.

    HTML Code:
      <script type="text/javascript">
    
      // if the count variable is undefined, set its value to zero
      if(! count) {
      var count = 0;
      }
    
      // function to increment value of count variable
      incrementCount() {
        count++;
      }
      </script> 
       
      <!-- button to call incrementCount() function, on click -->
      <form>
        <input type="button" value="Count"  onclick="incrementCount()">
      </form> 
      <br />
      
      <script type="text/javascript">
      // output count variable
      document.write(count);
       </script>
    Unfortunately the script is not working. Could you please tell me why?

    Thanks!
    Fergal Crawley (Previous Username: Proudirish.com)
    Business Advice Forum - Webmaster and Business Forum < Get a free link & win $5,000
    Forum Coin New World Currency

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there Fergal,

    There were a number of errors in the script you posted.

    The main two were that this:

    Code JavaScript:
    incrementCount() {
      count++;
    }

    was missing the key word "function". It should be:

    Code JavaScript:
    function incrementCount() {
      count++;
    }

    Also, you are not updating the display after the button was pressed.

    Here's a working script for you to play around with:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Increment count when button is clicked</title>
      </head>
    
      <body>
        <input type="button" value="Count" id="countButton" />
        
        <p>The button was pressed <span id="displayCount">0</span> times.</p>
        
        <script type="text/javascript">
          var count = 0;
          var button = document.getElementById("countButton");
          var display = document.getElementById("displayCount");
          
          button.onclick = function(){
            count++;
            display.innerHTML = count;
          }
        </script>
      </body>
    </html>
    Hopefully it should be clear enough what's going on, but if you have any questions, don't hesitate to ask.

  4. #4
    SitePoint Evangelist Fergal's Avatar
    Join Date
    Nov 2003
    Location
    Ireland
    Posts
    492
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Thanks Eric, I had already been through some of those links, but am new to JavaScript and couldn't get them to work.

    Thanks ever so much Pullo, I really appreciate you taking the time to do that and I will go through it in detail tomorrow.

    As you may know it's your "fault" I'm here
    Quote Originally Posted by Pullo View Post
    I'm sorry to say that you won't get around using JavaScript for this...
    Fergal Crawley (Previous Username: Proudirish.com)
    Business Advice Forum - Webmaster and Business Forum < Get a free link & win $5,000
    Forum Coin New World Currency

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by Fergal View Post
    As you may know it's your "fault" I'm here
    Me and my big mouth ...

    Seriously though, that's fine!
    JavaScript really is the way to go for this functionality and I'm more than happy to explain things to you at whatever level you need.


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
  •