HTML 如何在JavaScript中获取文本框的值

在本文中，我们将介绍如何使用JavaScript获取HTML文本框的值。文本框是HTML表单中常见的输入控件之一，它允许用户在页面上输入文本。

阅读更多：HTML 教程

使用JavaScript获取文本框的值

要获取文本框的值，我们可以使用JavaScript的document.getElementById方法来访问文本框元素，并通过value属性获取其值。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <title>获取文本框值的示例</title>
    <script>
        function getValue() {
            var textBox = document.getElementById("myTextBox");
            var value = textBox.value;
            alert("文本框的值是：" + value);
        }
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
    <button onclick="getValue()">获取文本框的值</button>
</body>
</html>

在上面的示例中，我们首先通过document.getElementById方法获取具有id为”myTextBox”的文本框元素，然后使用value属性获取其值。最后，我们通过alert方法来显示文本框的值。

处理文本框值的示例

下面是一个更复杂的示例，展示了如何使用获取到的文本框值进行进一步的处理：

<!DOCTYPE html>
<html>
<head>
    <title>处理文本框值的示例</title>
    <script>
        function calculateSum() {
            var firstNumber = Number(document.getElementById("firstNumber").value);
            var secondNumber = Number(document.getElementById("secondNumber").value);
            var sum = firstNumber + secondNumber;

            document.getElementById("result").innerHTML = "两个数字的和为：" + sum;
        }
    </script>
</head>
<body>
    <input type="number" id="firstNumber" placeholder="第一个数字">
    <input type="number" id="secondNumber" placeholder="第二个数字">
    <button onclick="calculateSum()">计算和</button>

    <p id="result"></p>
</body>
</html>

在上面的示例中，我们首先使用Number函数将文本框的值转换为数字类型，然后进行计算，最后将结果设置为<p>标签的内容。