Article Categories

Selected Reading

JavaScript (+) sign concatenates instead of giving sum?

Javascript Web Development Object Oriented Programming

The + sign concatenates strings instead of adding numbers when JavaScript treats the values as strings. This commonly happens with form inputs, which always return string values even when they contain numbers.

The Problem: String Concatenation vs Addition

When you use the + operator with strings, JavaScript concatenates them instead of performing mathematical addition:

<!DOCTYPE html>
<html>
<head>
    <title>String Concatenation Problem</title>
</head>
<body>
    <script>
        // These are strings, not numbers
        var a = "5";
        var b = "3";
        console.log("String concatenation: " + (a + b));
        
        // Convert to numbers first
        console.log("Actual addition: " + (parseInt(a) + parseInt(b)));
    </script>
</body>
</html>

Solution: Using parseInt() with Form Inputs

Form inputs always return string values. Use parseInt() to convert them to numbers before addition:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number Addition Calculator</title>
</head>
<body>
    <h3>Addition Calculator</h3>
    First Number: <input type="number" class="num1" placeholder="Enter first number"><br><br>
    Second Number: <input type="number" class="num2" placeholder="Enter second number"><br><br>
    
    <input type="button" onclick="sumOfTwoNumbers()" value="Calculate Sum">
    <p class="output"></p>
    
    <script>
        function sumOfTwoNumbers() {
            var num1 = document.querySelector(".num1").value;
            var num2 = document.querySelector(".num2").value;
            
            // Convert strings to integers before addition
            var addition = parseInt(num1) + parseInt(num2);
            
            document.querySelector(".output").innerHTML = 
                "The sum of " + num1 + " and " + num2 + " = " + addition;
        }
    </script>
</body>
</html>

Alternative Methods for Type Conversion

Besides parseInt(), you can use other methods to convert strings to numbers:

<!DOCTYPE html>
<html>
<head>
    <title>Type Conversion Methods</title>
</head>
<body>
    <script>
        var a = "15";
        var b = "25";
        
        // Method 1: parseInt()
        console.log("parseInt(): " + (parseInt(a) + parseInt(b)));
        
        // Method 2: Number()
        console.log("Number(): " + (Number(a) + Number(b)));
        
        // Method 3: Unary plus operator
        console.log("Unary +: " + (+a + +b));
        
        // Method 4: parseFloat() for decimals
        var c = "10.5", d = "20.3";
        console.log("parseFloat(): " + (parseFloat(c) + parseFloat(d)));
    </script>
</body>
</html>

Comparison of Conversion Methods

Method	Handles Decimals	Handles Invalid Input	Best Use Case
`parseInt()`	No (truncates)	Returns NaN	Whole numbers only
`parseFloat()`	Yes	Returns NaN	Decimal numbers
`Number()`	Yes	Returns NaN	General conversion
Unary `+`	Yes	Returns NaN	Quick conversion

Conclusion

Always convert string inputs to numbers before mathematical operations using parseInt(), parseFloat(), or Number(). This prevents string concatenation when you need numeric addition.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next