Javascript, increment a counter on button click

Question

In javascript, I want to make a counter that increases the value when you click a button.

When I click the add button the first time, the number doesn't increase.

But when I print the value to the console, the result increases.

The fiddle: http://jsfiddle.net/techydude/H63As/

  $(function() {
    var //valueCount = $("counter").value(),
        counter = $("#counter"),
        addBtn = $("#add"),
        value = $("#counter").html();

      addBtn.on("click", function() {

      counter.html(value ++);  //this value is not incremented.
      console.log(value);      //this value gets incremented.
      return

    });

  });

How do I make the value show the same for both lines?

Praveen Kumar Purushothaman · Accepted Answer · 2012-11-11 05:12:05Z

3

You are doing a Post Increment. Make it pre-increment:

addBtn.on("click", function() {
  counter.html(++value);
  console.log(value);
  return
});

Explanation:

// Increment operators
x = 1;
y = ++x;    // x is now 2, y is also 2
y = x++;    // x is now 3, y is 2

// Decrement operators
x = 3;
y = x--;    // x is now 2, y is 3
y = --x;    // x is now 1, y is also 1

answered Nov 11, 2012 at 5:12

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

Comments

Sudhir Bastakoti · Accepted Answer · 2012-11-11 05:01:24Z

2

do you mean:

addBtn.on("click", function() {
    counter.html(++value);
    return;          
});

answered Nov 11, 2012 at 5:01

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

1 Comment

TechyDude Over a year ago

The '++' has to go in front of the value i guess! Thank you for your help!

Mayank K. Swami · Accepted Answer · 2012-11-11 05:01:53Z

1

use

 value = parseInt($("#counter").html());

LIVE jSFiddle

  $(function() {
    var //valueCount = $("counter").value(),
        counter = $("#counter"),
        addBtn = $("#add"),
        value =    parseInt($("#counter").html());


    addBtn.on("click", function() {

      counter.html(++value );
      console.log(value);
      return

    });

  });

answered Nov 11, 2012 at 5:01

Mayank K. Swami

57.3k23 gold badges130 silver badges148 bronze badges

Comments

Cacho Santa · Accepted Answer · 2012-11-11 05:10:50Z

1

Try this:

  $(function() {
    var //valueCount = $("counter").value(),
        counter = $("#counter"),
        addBtn = $("#add"),
        value = $("#counter").html();


    addBtn.on("click", function() {

      counter.html(++value);
      console.log(value);
      return

    });

  });

Take a look in this link about the operator description of ++ in JavaScript.

Only one line actually changed; however, here is the fiddler link if you want to test it.

edited Nov 11, 2012 at 5:10

answered Nov 11, 2012 at 5:03

Cacho Santa

6,9266 gold badges44 silver badges76 bronze badges

Collectives™ on Stack Overflow

Javascript, increment a counter on button click

4 Answers 4

You are doing a Post Increment. Make it pre-increment:

Explanation:

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

You are doing a Post Increment. Make it pre-increment:

Explanation:

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related