HTML <input> tag with type="number" returns value as string

<input type="number">

input type=" number" here we can see an input type is a number, but behind the scene, it is a string. It tells the browser that the user should only be allowed to enter digits and other characters like 'e', '-', '+', '.' which are used for floating point numbers. It is used for validation purposes as well.

index.html

1. <label> Side1 <input type="number" class="triaInput"></label> 
//user enters 2cm
2. <label> Side2 <input type="number" class="triaInput"></label> 
//user enters 4cm
3. <label> Side3 <input type="number" class="triaInput"></label>
//user enters 6cm

We have three input tags taking all sides of a triangle to calculate the Perimeter of a triangle

Perimeter of triangle = Side1 + Side2 + Side3;

index.js
const input = document.querySelectorAll(".triaInput");

function CalPerimeter(){
    const sum = input[0].value + input[1].value + input[2].value ;
    return sum;
}
//sum = 246cm

function CalPerimeterByConversion(){
    const sum = Number(input[0].value)+Number(input[1].value)+Number(input[2].value);
    return sum;
}
//sum = 12cm

Hypotenuse of triangle = sqrt(Side1² + Side2²);

function CalHypotenuse(){
    const hypo = Math.sqrt((input[0].value*input[0].value) + (input[1].value*input[1].value));
    return hypo;
}
//hypo = 20cm

Are you even confused about why add operator in CalPerimeter() does concatenation while in CalHypotenuse() works as expected and does proper addition?

So here is the reason and explanation for it

While performing an arithmetic operation like subtraction(-), multiplication(*), modulus(%), division(/), increment(++), and decrement(--) the inputs taken from HTML are automatically converted to a number.

Only the addition operator gets confused, so it behaves differently and does concatenation between two operands.

console.info(typeof("4"+"2"),"4+2 = ",("4"+"2"));
//string 4+2 =  42

So while performing addition, we first have to convert it into a number using the parseInt() or Number() method.

//"Converting to a number"
console.info(typeof(Number("2")+Number("4")),"4+2 = ",Number("2")+Number("4")); 
//number 4+2 =  6

For all the below operators excluding '+'. There is no need of converting to a number because on performing the arithmetic operations the two operands "4" and "2" which are strings are converted into a number, and calculations are done accordingly.

console.info(typeof("4"*"2"),"4*2 = ",("4"*"2"));
//number 4*2 =  8

console.info(typeof("4"/"2"),"4/2 = ",("4"/"2"));
//number 4/2 =  2

console.info(typeof("4"-"2"),"4-2 = ",("4"-"2"));
//number 4-2 =  2

console.info(typeof("4" % "2"),"4%2 = ",("4" % "2"));
//number 4%2 =  0 

console.info(typeof(("4"*"4")+("2"*"2")),"(4*4)+(2*2) = "("4"*"4")+("2"*"2")); 
//number (4*4)+(2*2) =  20

typeof() method of javascript is used to check the data type.

In the last example, we can see that once any arithmetic operation is performed it gets converted to a number, so in this case, the addition operator works perfectly fine treating the operands as a number. And that's the reason our Hypotenuse of a triangle is calculated correctly.

var a = "4";
console.info(typeof(a), ++a);
//string 5

//after pre increment
console.info(typeof(a));
//number

We have learned that before we perform an arithmetic operation on operands taken as input from the user, it will always be in a string. We can safely carry out any operations rather than addition without any worries or need to convert them. We must be careful only while finding the sum or addition that has to be performed between the operands. type=number is just to restrict the user from typing the characters and used for client-side validation.