Xuất giá trị JavaScript vào hộp văn bản (Textbox)

Giới thiệu

Để hiển thị kết quả tính toán hoặc dữ liệu JavaScript vào một ô nhập liệu (textbox), ta sử dụng thuộc tính .value của phần tử DOM.

Ví dụ: Cộng hai số và hiển thị kết quả

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xuất ra Textbox</title>
    <style>
        label { display: block; margin: 5px 0; }
        input { margin: 5px 0; padding: 5px; }
        button { margin: 5px 0; padding: 5px 10px; }
    </style>
</head>
<body>
    <label>Số thứ nhất: <input type="text" name="input1"></label>
    <label>Số thứ hai: <input type="text" name="input2"></label>
    <button onclick="add()">Cộng hai số</button>
    <br>
    <label>Kết quả: <input type="text" name="display" readonly></label>

    <script>
        function add() {
            var f = parseInt(document.getElementsByName('input1')[0].value) || 0;
            var s = parseInt(document.getElementsByName('input2')[0].value) || 0;
            var result = f + s;
            document.getElementsByName('display')[0].value = result;
        }
    </script>
</body>
</html>

Giải thích

• document.getElementsByName() trả về NodeList, ta lấy phần tử đầu tiên bằng [0].
• .value lấy hoặc gán giá trị của ô input.
• Sử dụng || 0 để tránh NaN khi ô trống.

Cách chạy

Lưu file index.html và mở với Live Server trong VS Code.