HTML/Javascript Button Click Counter

Question

I have done something similar to this before, and I know this is really close. I'm just trying to make it so that my button increments the javascript variable, and the function then displays the new value.

<html>
<head>
    <title>Space Clicker</title>
</head>

<body>
    <script type="text/javascript">
    int clicks = 0;
    function click() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    </script>
    <button type="button" onClick="click()">Click me</button>
    <p>Clicks: <a id="clicks">0</a></p>

</body></html>

i think the value of int clicks is always 0, you aren't getting the value from the screen before you increment — mmeasor
– mmeasor, Commented Mar 14, 2014 at 10:48
@DhavalMarthak but in this case he uses getElementById() appropriately. — Monacraft
– Monacraft, Commented Mar 14, 2014 at 10:49

Zsolt Meszaros · Accepted Answer · 2021-01-23 10:40:04Z

50

Use var instead of int for your clicks variable generation and onClick instead of click as your function name:

var clicks = 0;

function onClick() {
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks;
};

<button type="button" onClick="onClick()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>

In JavaScript variables are declared with the var keyword. There are no tags like int, bool, string... to declare variables. You can get the type of a variable with 'typeof(yourvariable)', more support about this you find on Google.

And the name 'click' is reserved by JavaScript for function names so you have to use something else.

edited Jan 23, 2021 at 10:40

Zsolt Meszaros

23.3k19 gold badges60 silver badges70 bronze badges

answered Mar 14, 2014 at 10:49

ReeCube

2,61720 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Monacraft Over a year ago

At Least provide a better explanation, otherwise great answer: +1.

Sajib · Accepted Answer · 2014-03-14 11:06:52Z

10

Don't use the word "click" as the function name. It's a reserved keyword in JavaScript. In the bellow code I’ve used "hello" function instead of "click"

<html>
<head>
    <title>Space Clicker</title>
</head>

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

    var clicks = 0;
    function hello() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    </script>
    <button type="button" onclick="hello()">Click me</button>
    <p>Clicks: <a id="clicks">0</a></p>

</body></html>

answered Mar 14, 2014 at 11:06

Sajib

1604 bronze badges

Comments

Dhaval Marthak · Accepted Answer · 2014-03-14 10:49:06Z

2

After looking at the code you're having typos, here is the updated code

var clicks = 0; // should be var not int
    function clickME() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks; //getElementById() not getElementByID() Which you corrected in edit
 }

Demo

Note: Don't use in-built handlers, as .click() is javascript function try giving different name like clickME()

answered Mar 14, 2014 at 10:49

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

3 Comments

Jumpoy Over a year ago

Thankyou, I'm pretty sure that it was the var that fixed it.

Werner Over a year ago

And the name of the function and that typo in getElementById

Dhaval Marthak Over a year ago

@Jumpoy NO, You should rename click() to someOther() :)

Mitul Panchal · Accepted Answer · 2017-12-19 10:39:21Z

1

Through this code, you can get click count on a button.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Button</title>
    <link rel="stylesheet" type="text/css" href="css/button.css">
</head>
<body>
    <script src="js/button.js" type="text/javascript"></script>

    <button id="btn" class="btnst" onclick="myFunction()">0</button>
</body>
</html>
 ----------JAVASCRIPT----------
let count = 0;
function myFunction() {
  count+=1;
  document.getElementById("btn").innerHTML = count;

 }

answered Dec 19, 2017 at 10:39

Mitul Panchal

6526 silver badges7 bronze badges

Comments

vini · Accepted Answer · 2014-03-14 10:53:21Z

0

    <!DOCTYPE html>
<html>
<head>
<script>
     var clicks = 0;
    function myFunction() {

        clicks += 1;
        document.getElementById("demo").innerHTML = clicks;


    }
</script>
</head>
<body>

<p>Click the button to trigger a function.</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

</body>
</html>

This should work for you :) Yes var should be used

answered Mar 14, 2014 at 10:53

vini

4,73424 gold badges85 silver badges176 bronze badges

1 Comment

monkey Over a year ago

This is genius - I was trying to make a vote counter, and this works brilliantly (all I had to add to it was to disable use after onclick).

Collectives™ on Stack Overflow

HTML/Javascript Button Click Counter

5 Answers 5

1 Comment

Comments

3 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

3 Comments

Comments

1 Comment

Linked

Related