Increment a variable on click using jquery

Question

This seems like a very simple thing to do, but I can't seem to get it to work. I have:

<button id="more">more</button>
<button id="less">less</button>

<p id="info"></p>

<script>
var howMany = 1;
$(#more).click(function(){
    howMany + 1;
});
$(#less).click(function(){
    howMany - 1;
});
$("#info").text(howMany);
</script>

I simply want the info paragraph to increase or decrease when the user click more or less.

howMany + 1; doesn't do anything.

qJake
– qJake

2012-05-29 19:54:28 +00:00
Commented May 29, 2012 at 19:54 — qJake
– qJake, Commented May 29, 2012 at 19:54

Prasenjit Kumar Nag · Accepted Answer · 2012-05-29 19:57:22Z

5

You have several mistakes in your code, as others have already mentioned like missing quotes in selector, not reassigning variable value after incrementing/decementing.

var howMany = 1;
$('#more').click(function(){
    howMany += 1;
    $("#info").text(howMany);
});
$('#less').click(function(){
    howMany -= 1;
    $("#info").text(howMany);
});
$("#info").text(howMany);

Here is a working Fiddle

answered May 29, 2012 at 19:57

Prasenjit Kumar Nag

13.5k3 gold badges47 silver badges57 bronze badges

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

Comments

pimvdb · Accepted Answer · 2012-05-29 19:54:12Z

4

There are several issues:

You need strings as selectors. So enclose #more with quotes: "#more".
You need to update the variable, not just calculate the addition or subtraction and ignore the result. Use += and -= instead of + and -.
You probably want to update the <p> element after every addition/subtraction. So put the .text call inside both click functions, after having updated the variable.

answered May 29, 2012 at 19:54

pimvdb

155k80 gold badges313 silver badges357 bronze badges

1 Comment

qJake Over a year ago

I saw the howMany + 1; but totally missed that the selector wasn't a string. Good eye!

Mathew Thompson · Accepted Answer · 2012-05-29 19:55:08Z

1

You're not assigning the result to the variable, plus you're setting the text of the element outside the click event! Try:

$("#more").click(function(){
    howMany += 1;
    $("#info").text(howMany);
});
$("#less").click(function(){
    howMany -= 1;
    $("#info").text(howMany);
});

answered May 29, 2012 at 19:55

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Comments

zessx · Accepted Answer · 2012-05-29 19:58:46Z

1

You add 1 to howMany, but don't affect the result to a variable. Use howMany = howMany + 1; or howMany += 1;

EDIT : according to pimvdb answer, ther're other problems, have a look on his post. Corrected code is here :

<button id="more">more</button>
<button id="less">less</button>

<p id="info"></p>

<script>
var howMany = 1;
$("#more").click(function(){
    howMany += 1;
    $("#info").text(howMany);
});
$("#less").click(function(){
    howMany -= 1;
    $("#info").text(howMany);
});
</script>

edited May 29, 2012 at 19:58

answered May 29, 2012 at 19:53

zessx

68.9k29 gold badges139 silver badges166 bronze badges

Collectives™ on Stack Overflow

Increment a variable on click using jquery

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related