เหตุผลที่เครื่องหมาย + ใน JavaScript ต่อสตริงแทนการบวกตัวเลข

เครื่องหมาย + ทำการต่อสตริง (Concatenate) เพราะค่าจาก Textbox เป็นชนิดข้อมูล String ต้องใช้ parseInt() แปลงเป็นตัวเลขก่อน

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    FirstNumber: <input type="number" class="num1" placeholder=""><br>
    SecondNumber: <input type="number" class="num2" placeholder=""><br><br>
    <input type="button" onclick="sumOfTwoNumbers()" value="Addition">
    <p class="output"></p>

    <script>
        function sumOfTwoNumbers() {
            var num1 = document.querySelector(".num1").value;
            var num2 = document.querySelector(".num2").value;
            var addition = parseInt(num1) + parseInt(num2);
            document.querySelector(".output").innerHTML = "The addition of two numbers = " + addition;
        }
    </script>
</body>
</html>

วิธีรันโปรแกรม

1. บันทึกไฟล์ชื่อ "anyName.html" หรือ "index.html"
2. คลิกขวาที่ไฟล์ เลือก "Open with Live Server" ใน VS Code Editor

ผลลัพธ์

กรอกตัวเลขในทั้งสองช่อง คลิกปุ่ม "Addition" จะแสดงผลบวกที่ถูกต้อง