แสดงผลลัพธ์ JavaScript ใน Textbox (กล่องข้อความ)

สามารถนำค่าที่คำนวณได้จาก JavaScript ไปแสดงใน Textbox โดยใช้คุณสมบัติ .value ขององค์ประกอบ input

ตัวอย่าง: โปรแกรมบวกเลขสองจำนวนแสดงผลใน Textbox

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>แสดงผลใน Textbox</title>
    <style>
        label { display: block; margin: 5px 0; }
        input { padding: 5px; margin: 5px 0; }
        button { padding: 5px 10px; margin: 5px 0; }
    </style>
</head>
<body>
    <label>ตัวเลขแรก: <input type="text" name="input1"></label>
    <label>ตัวเลขที่สอง: <input type="text" name="input2"></label>
    <button onclick="add()">บวกเลข</button>
    <label>ผลบวก: <input type="text" name="display" readonly></label>

    <script>
        function add() {
            // รับค่าจาก input แปลงเป็นตัวเลข
            var f = parseInt(document.getElementsByName('input1')[0].value) || 0;
            var s = parseInt(document.getElementsByName('input2')[0].value) || 0;
            
            var result = f + s;
            
            // แสดงผลใน textbox
            document.getElementsByName('display')[0].value = result;
        }
    </script>
</body>
</html>

วิธีทดสอบ

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

ผลลัพธ์

เมื่อกรอกตัวเลขในช่องแรกและช่องที่สอง แล้วกดปุ่ม "บวกเลข" ผลลัพธ์จะแสดงในช่อง "ผลบวก" ทันที