How to add in jquery

With the advancement of web technology, the tools used by developers in the development process are also constantly upgraded. As a popular JavaScript library, JQuery has become the first choice of many developers. One of the common functions is to find elements on the page and operate on them. When doing these operations, a very common need is to add some values ​​together. This article will introduce how to use JQuery to implement the addition function.

First, we need to add an input box containing a value and a button to the HTML page. In this example, we will use two input boxes to perform the addition operation, as shown below:

<input type="text" id="num1" />
<input type="text" id="num2" />
<button id="addBtn">加</button>
<div id="result"></div>

Next, we need to write a JQuery function that will extract the value in the input box and add They add up. After completing this task, we will display the results in a div element. Here is the code:

$(function() {
  $("#addBtn").click(function() {
    var num1 = parseInt($("#num1").val());
    var num2 = parseInt($("#num2").val());
    var result = num1 + num2;
    $("#result").html(result);
  });
});

Here, we have used jQuery’s click() function. This function is called when #addBtn is clicked. Next, we extract the values ​​in #num1 and #num2 and convert them to integers using the parseInt() function. We then add the two integers and store the result in the variable result. Finally, we display this result in a #result element using the html() function.

It should be noted that we use the parseInt() function here to convert the value of the input box into an integer. If the value contained in the input box is not a numeric value, parseInt() will return NaN, so you need to ensure that the value in the input box is a number before performing the addition operation.

If we need to add more numbers, we can use a similar method. For example, we can add a third input box and a second button as follows:

<input type="text" id="num1" />
<input type="text" id="num2" />
<input type="text" id="num3" />
<button id="addBtn">加</button>
<button id="addBtn2">加 3 个数值</button>
<div id="result"></div>

We can write another function to add three numerical values:

$(function() {
  $("#addBtn2").click(function() {
    var num1 = parseInt($("#num1").val());
    var num2 = parseInt($("#num2").val());
    var num3 = parseInt($("#num3").val());
    var result = num1 + num2 + num3;
    $("#result").html(result);
  });
});

In this example, we add a new button to perform the addition operation. This new function performs similarly to the previous function, but here we need to add an additional integer variable num3 and add it to the first two values.

To sum up, it is very simple to use JQuery to implement the addition function. We just need to extract the values ​​from the input boxes, add them up, and display the results on the page. This is just one of the many features that JQuery provides to help web developers when writing complex applications.

The above is the detailed content of How to add in jquery. For more information, please follow other related articles on the PHP Chinese website!