jQuery Click Counter

Question

I am trying to make a simple cookie clicker type game (click counter) with jQuery. I want to have a button that makes the value of clicks go up by one every second. How would I go about this and are there any errors in my coding? I'm very new to all of this.

Here's my code:

$(function() {
  $('#target').click(function() {
    $('#output').html(function(i, val) {
      return val * 1 + 1;
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <button id="target" type="button">Click</button>
  <div id="output">0</div>
</div>

To avoid having to parse the number with each update, you might want to make a variable called count which you manipulate and display from the JS. — castletheperson
– castletheperson, Commented Apr 30, 2016 at 0:25

castletheperson · Accepted Answer · 2016-04-30 01:44:17Z

2

A button that automatically "clicks" the button would require that you add a setInterval that refreshes the number continually, and another button that changes how many clicks get added with each refresh.

Here's how I would do it. I've coded it in such a way that you could easily add other buttons which change the click rate in other ways. Notice the difference between incrementing the count and incrementing the countRate. JSFiddle

$(function() {
  var count = 0, countRate = 0, output = $('#output');

  setInterval(function(){ output.html(count) }, 1); // update continually
  setInterval(function(){ count += countRate }, 1000); // update once-per-second

  $('#click').click(function(){ count += 1 });
  $('#autoClick').click(function(){ countRate += 1 });
});

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

<button id="click">Click</button>
<button id="autoClick">Auto Click</button>
<div id="output">0</div>

edited Apr 30, 2016 at 1:44

answered Apr 30, 2016 at 0:58

castletheperson

33.6k11 gold badges74 silver badges111 bronze badges

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

1 Comment

castletheperson Over a year ago

I've updated my algorithm several times. It's much nicer now.

Nerdroid · Accepted Answer · 2016-04-30 01:39:42Z

0

If I'm understanding you correctly, the bit you're struggling with is increasing the value of each click, once per second. You'll want to use setInterval

jsfiddle Demo

var score = parseInt($('#output').html());
$(function() {
  setInterval(function() {
    score += 1;
    $('#output').html(score);
  }, 1000);

  $('#target').click(function() {
    score += 1;
    $('#output').html(score);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <button id="target" type="button">Target</button>
  <br/>
  <div id="output">0</div>
</div>

edited Apr 30, 2016 at 1:39

Nerdroid

14.1k5 gold badges62 silver badges72 bronze badges

answered Apr 30, 2016 at 0:18

Erresen

2,0331 gold badge25 silver badges43 bronze badges

15 Comments

Jalen Nguyen Over a year ago

I just tried this, but the value doesn't incease each second? Sorry I'm a huge noob at coding in general.

Jalen Nguyen Over a year ago

Hi, it's just randomly increasing the value now? What I'm trying to do is make a button that when clicked increases the value every second. And when I click the main button, it will increase the value by one.

castletheperson Over a year ago

The issue is that it's not displaying the number within the setInterval. The output is only getting updated when the button is clicked.

Erresen Over a year ago

what the code does is increase the value of clickValue once per second, so if you click it after 1 second it'll be worth 2 (since it starts at 1), if you click after 10 it'll be worth 10. This number is then added to output.

Jalen Nguyen Over a year ago

Is there a way to start it with a seperatre button?

|

Collectives™ on Stack Overflow

jQuery Click Counter

2 Answers 2

1 Comment

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related