Button clicker for website

Question

I need a button clicker. When I click on button, 0 turns to 1, if I click again , 1 turns to 2 etc.

I have tried this code, but it doesn't work for me.

I need a code that work and that will remember amount of clicks even if I refresh tab or close it. This is code i've tried.

<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>

Have i looked into cookies? I want to make something like Cookie-Clicker game on website, so the first step is this. :) — Stefan Đorđević, May 09 '15 at 15:54
Ah, good, because cookies surely "will remember amount of clicks even if i refresh tab or close [the page]." — Drakes, May 09 '15 at 15:55
@StefanĐorđević check my code below, solved your problem of saving count; LOCAL STORAGE to the rescue — Ritesh Karwa, May 09 '15 at 16:34

user3125999 · Answer 1 · 2015-05-09T19:42:03.783

1

Javascript has no "int", it uses "var".

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

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

</body></html>

edited May 09 '15 at 19:42

answered May 09 '15 at 15:52

user3125999

201
4
14

THIS CODE DOESNT WORK – Ritesh Karwa May 09 '15 at 16:18
`click` is a reserved JS function – Drakes May 09 '15 at 16:22
it worked for me, anyway, you're absolutely right. I've changed the function name... – user3125999 May 09 '15 at 19:43

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

You need to save your Click count to somewhere persistent and retrieve again when page is reloaded. Cookies is good place for that.

You can learn more about cookies here or here

edited May 23 '17 at 12:14

Community

1
1

answered May 09 '15 at 15:56

Orifjon

915
8
25

score 0 · Answer 3 · edited May 23 '17 at 11:58

Change click() to almost anything but that. I suggest incrementClick(). click() is a reserved function in JavaScript.

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

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

</body></html>

For persisting the clicks across page refresh, I suggest using cookies to save the current value of the click variable, like this (ref):

function createCookie(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

Reading cookies:

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

Demo with cookie support: http://jsbin.com/rekafi/4

Note: I suggest you move away from including inline JavaScript in your <button> element (e.g. onClick="incrementClick()"). Try to keep your JS separate from your HTML using jQuery, for example.

Tero Tolonen · Answer 4 · 2015-05-09T16:45:40.817

0

You could try saving to localStorage

var clicks = parseInt( localStorage.getItem("clicks") || 0 ) ;

function bindThisToButtonClickHandler() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
    localStorage.setItem("clicks", clicks) 
};

You can check the browser support here : http://caniuse.com/#search=localstorage

edited May 09 '15 at 16:45

answered May 09 '15 at 16:15

Tero Tolonen

4,144
4
27
32

Ritesh Karwa · Answer 5 · 2015-05-09T16:38:28.400

HTML CODE THAT WORKS

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <!--<script src="app1.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>

</head>

<body>
  <div id="clickdiv" >hello</div> 
  <button  onclick="countTracker()">Click me</button> 
  <script type="text/javascript">

      var clickCount = 0;
      function countTracker() {
          clickCount += 1;
          document.getElementById("clickdiv").innerHTML = "Clicks:" + clickCount;
          localStorage.setItem("count", clickCount);

      }
      str_count = localStorage.getItem("count");
      console.log(str_count);
    </script>

</body>
</html>

Care to explain where you got the idea to change the function name to `clickFun()` to the OP? :) — Drakes, May 09 '15 at 16:26
@Drakes clickFun is a bad name but using click() it was not working. My understanding is "click" is a reserved word, it cannot be used as function name. — Ritesh Karwa, May 09 '15 at 16:36

Button clicker for website

5 Answers5