Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to output JavaScript into a Textbox?

Javascript Web Development Object Oriented Programming

You can output JavaScript values to a textbox using the value property. This is commonly done to display calculation results or user feedback.

Basic Approach

To output to a textbox, access the input element and set its value property:

document.getElementById("myTextbox").value = "Your output here";

Example: Calculator with Textbox Output

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Textbox Output</title>
</head>
<body>
    <label for="input1">First Number: </label>
    <input type="text" id="input1" placeholder="Enter first number"><br><br>
    
    <label for="input2">Second Number: </label>
    <input type="text" id="input2" placeholder="Enter second number"><br><br>
    
    <button onclick="addNumbers()">Add Numbers</button><br><br>
    
    <label for="result">Result: </label>
    <input type="text" id="result" readonly>

    <script>
        function addNumbers() {
            var num1 = parseInt(document.getElementById('input1').value);
            var num2 = parseInt(document.getElementById('input2').value);
            
            // Check for valid numbers
            if (isNaN(num1) || isNaN(num2)) {
                document.getElementById('result').value = "Please enter valid numbers";
                return;
            }
            
            var sum = num1 + num2;
            document.getElementById('result').value = sum;
        }
    </script>
</body>
</html>

Alternative Methods

You can also use getElementsByName() or querySelector():

// Using getElementsByName()
document.getElementsByName('outputBox')[0].value = result;

// Using querySelector()
document.querySelector('#outputBox').value = result;

Key Points

  • Use getElementById() for the most efficient element selection
  • Always validate input before processing to avoid errors
  • Consider making output textboxes readonly to prevent user editing
  • Use parseInt() or parseFloat() to convert string inputs to numbers

Conclusion

Setting a textbox value with JavaScript is straightforward using the value property. Always validate inputs and handle edge cases for robust applications.

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

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements