• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / jQuery / Using jQuery to Increment Value on Click

Using jQuery to Increment Value on Click

July 3, 2022 Leave a Comment

We can use jQuery to increment the value of a variable on a user click very easily by using the jQuery click() method.

var i = 0;
$("#div1").click(function(){
  i++; //Same as i = i + 1
});

Let’s see a couple of examples of this.


In this first example, we will simply have a variable in the background that we will increment whenever a user clicks a button. Here is the HTML setup.

<div id="div1">
  <button id="button1">Increment value by 1</button>
</div>

In our JavaScript and jQuery code, we will simply have a global variable called value1. Each time someone clicks the button, we will increment our variable by 1.

Here is the code:

var value1 = 0;
$("#button1").click(function(){
  value1++;
});

If you are using WordPress, don’t forget to change the $ to jQuery as below:

var value1 = 0;
jQuery("#button1").click(function(){
  value1++;
});

In this next example, we will have a value in our HTML and show how to inclement that for the user to see.

Using jQuery to Increment an HTML Value on a User Click

This example will be the same as the previous one, but instead of having a global variable that we increment, we will increment a value in our HTML div.

Here is our HTML code:

<div id="div1">
  <div id="value1">0</div>
  <div id="click-me">Increment above value by 1</div>
</div>

In our JavaScript code, the additional steps we need to take are to get the value in our div, increment its value, and then update the div with the new value.

To do this we just need to make use of the jQuery text() method to get the value from our div, and to also update that value for the user to see.

Here is the JavaScript and jQuery code:

$("#click-me").click(function(){
  //Get the value in our div and convert to a number, which starts at 0
  var userText = Number($("#value1").text());
  
  //Increment the value by 1
  userText++;
  
  //Update the div for the user to see
  $('#value1').text(userText);
});

The final code and output for this example of using jQuery to increment an HTML value on a user click is below:

Code Output:

0
Increment above value by 1

Full Code:

<div id="div1">
  <div id="value1">0</div>
  <div id="click-me">Increment above value by 1</div>
</div>

<script>

$("#click-me").click(function(){
  var userText = Number($("#value1").text());
  userText++;
  $('#value1').text(userText);
});

</script>

Hopefully this article has been useful to help you understand how to use jQuery to increment a value on click.

Other Articles You'll Also Like:

  • 1.  Using jQuery prepend to Insert Element As First Child
  • 2.  Changing the Background Image of a div Using jQuery
  • 3.  Using jQuery to see if URL Contains Specific Text
  • 4.  Using jQuery to Change Div Text
  • 5.  Examples of Text Animations Using jQuery
  • 6.  Get the Height of a Div Using jQuery
  • 7.  Using jQuery to Remove Attribute from HTML Element
  • 8.  jQuery contains – How to Check if a Paragraph Contains Specific Text
  • 9.  jQuery focusout – How to Use the focusout() Method on an HTML Form
  • 10.  jQuery parent – Get the Parent Element of a Div

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy