# How To Add Two Numbers Using JavaScript

In this tutorial, you will learn how to add two numbers using javascript. Adding two numbers in javascript is very easy and it is something that you should be able to do without any issue even if you are a newbie.

Like other programming languages, we do have an addition operator (`+`) and this is all what you need to add two numbers.  The data in the input field is always of string type, so make sure to convert it into integer type by using the parseInt() method before performing any sort of arithmetic operation.

The technique demonstrated in this tutorial will work with only whole numbers, but if you are planning to add two decimal numbers as well as whole numbers, then I suggest you have a look over this tutorial.

In the following example, we have 3 input fields and one button.  Upon click of a button, we will get values from the first two input fields and perform the addition.  The result will be displayed in the third input field.  Please have a look over the code example and the steps given below.

HTML & CSS

• We have 3 elements in the HTML file (`div`, `input`, and `button`). The `div` element is just a wrapper for the rest of the elements.
• The `innerText` for the `button` element is `“Get Total”`.
• We have done some basic styling using CSS and added the link to our `style.css` stylesheet inside the `head` element.
• We have also included our javascript file `script.js` with a `script` tag at the bottom.
```<!DOCTYPE html>
<html lang="en">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<body>

<div class="container">
<input type="number" id="first" placeholder="Enter First Number" />
<input type="number" id="second" placeholder="Enter Second Number" />
<input type="number" id="total" placeholder="Total" />
<button>Get Total</button>
</div>

<script src="script.js"></script>
</body>

</html>```
```.container {
width: 400px;
margin: auto;
display: flex;
flex-direction: column;
}

input {
margin-bottom: 10px;
}

button  {
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}```

Javascript

• We have selected all the `input` elements and the `button` element using the `document.querySelector()` method and stored them in `firstInput`, `secondInput`, `totalInput`, and `btnAdd` variables respectively.
• We have attached the `click` event listener to the `button` element.
• In the event handler function, we are getting values from the first two input fields using `value` property and storing them in the `first` and `second` variables respectively.
• We have the `getTotal()` method and this method takes 2 strings as a parameter. We are converting both the strings into integer type by using the `parseInt()` method and returning their sum.
• We are setting the sum as a value of the third `input` element.
```let firstInput = document.querySelector("#first");
let secondInput = document.querySelector("#second");
let totalInput = document.querySelector("#total");