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

**Fergal** · Feb 20, 2013 09:43

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!

**PicnicTutorials** · Feb 20, 2013 11:08

This search shows many examples https://www.google.com/search?q=java...&client=safari

**Pullo** · Feb 20, 2013 13:58

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.

**Fergal** · Feb 20, 2013 15:05

Originally Posted by EricWatson

This search shows many examples https://www.google.com/search?q=java...&client=safari

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

Originally Posted by Pullo

I'm sorry to say that you won't get around using JavaScript for this...

**Pullo** · Feb 20, 2013 15:26

Originally Posted by Fergal

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.

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions