December 16, 2015

How To Add Two Numbers Using JavaScript

By Krishnaa JavaScript Questions 0 Comments

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">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<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;
  padding: 5px;
}

button  {
  padding: 5px 10px;
}

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");
let btnAdd = document.querySelector("button");


btnAdd.addEventListener("click", () => {
  var first = firstInput.value;
  var second = secondInput.value;  
  totalInput.value = getTotal(first, second);  
});

function getTotal(first, second) {
  return parseInt(first) + parseInt(second);
}

You May Also Like: