JavaScript บวกเลขจาก TextBox

สอนภาษา JavaScript บวกเลขจาก TextBox 2 อัน และแสดงผลัพธ์ขึ้นหน้าเว็บไซต์ ด้วยคำสั่ง innerHTML และใช้คำสั่ง parseInt แปลงค่าจาก TextBox ทั้ง 2 ที่ JavaScript ดึงข้อมูลมา สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript บวกเลขจาก TextBox

<form>
    ตัวเลขที่ 1 <input type="text" id="number1">
    <br/>
    ตัวเลขที่ 2 <input type="text" id="number2">
    <br/>
    <input type="button" value="คำนวณ" onclick="cal()">
    <div id="result"></div>
</form>

<script>
    function cal() {
        var number1 = document.getElementById("number1");
        var number2 = document.getElementById("number2");
        var result = document.getElementById("result");
        var s = parseInt(number1.value) + parseInt(number2.value);
        result.innerHTML = s;
    }
</script>

1. สร้างฟอร์ม HTML พร้อม TextBox และกำหนด id คือ number1 และ number2

2. กำหนด onclick ให้กับปุ่ม button เพื่อผู้ใช้งานกดแล้วจะเรียกใช้ function cal ใน JavaScript

3. function cal จะดึงข้อมูลจาก TextBox ด้วย document.getElementById

4. ใช้คำสั่ง parseInt แปลงค่าจาก TextBox ให้เป็นตัวเลข และนำมาบวกกัน

5. นำผลลัพธ์แสดงที่หน้าเว็บไซต์ตรง div result ด้วยคำสั่ง innerHTML