How to increment the value of an element using jQuery / How to add 1 to an element value using jQuery

On:

Problem

Get the value of an element such as a span or a text field using jQuery and increment its value. Suppose there is a text field with id textBox which has a value 5, then in order to get the value of this text box and increment it, following code seems correct and is expected to give 6 as the result

var value = $(“#textBox”).val();
value = value + 1;

But it is NOT so. When the above code is executed and the result is checked, it comes out to be 51 and not 6.

Reason

When the value of an element is retrieved, it is considered as a string. When anything(a number or a string) is added to this value, it is considered as a concatenation operation of string values instead of addition. Thus the concatenation of 5 and 1 is considered as “5” + “1” and not 5 + 1. Thus the result is not 6 but 51.

Solution

There are many ways to achieve the desired result. All are outlined below.

Method 1 : Using parseInt function

Javascript’s parseInt function takes a string as argument and returns its integer equivalent. Example, parseInt("5") will return 5. Thus for incrementing the value of a text box, just get its value, convert it into an integer and add 1 to it as shown below.

var value = $(“#textBox”).val();
value = parseInt(value) + 1;

Above code can be written in one line as

var value = parseInt($(“#textBox”).val()) + 1;

parseInt function ignores any non-numeric characters present at the end of the string supplied to it. Thus, parseInt("245.abcd") returns 245.

 

Method 2 : Using Number function of javascript

Javascript’s Number() function converts the argument passed to it to integer format. Difference between Number and parseInt functions is that Number can accept any object as argument while parseInt accepts only string values. Thus to increment the value of a text box using Number function, code would be as follows

var value = $(“#textBox”).val();
value = Number(value);
value = value + 1;

Again, the above code can be written in one line as

var value = Number($(“#textBox”).val()) + 1;

Method 3 : Using + operator

This is the simplest method to convert the value of an element to integer format. This value can then be incremented easily. Just prepend the value retrieved from the element with a + operator as shown below.

var incrementedValue = +$(“#textBox”).val() + 1;

Notice the + before the jQuery’s $ operator. It is called unary operator in this case and converts the value of textbox to an integer format.

This method is the fastest of all the 3 methods shown here.

 

Let’s tweak in

  1. If the parameter passed to Number() function is a Date object, the value returned is the number of milliseconds elapsed since midnight January 1, 1970 UTC.
  2. parseFloat function can be used to convert a string containing decimal values to a float value.
  3. All the above methods can be applied to any element such as span, label, table cell text etc., which is convertible to an integer.

Leave a Reply