📌  相关文章
📜  html 通过元素 id 获取输入框值 - Javascript (1)

📅  最后修改于: 2023-12-03 15:31:18.133000             🧑  作者: Mango

HTML 通过元素 id 获取输入框值 - JavaScript

在开发 web 应用程序时，经常需要获取 HTML 页面元素的值，并以某种方式处理它们。在这个教程中，我们将学习如何使用 JavaScript 通过元素 id 获取输入框的值。

HTML 输入框

HTML 中，input 元素通常用于创建各种表单，如文本框、下拉菜单、单选框、复选框等。下面是一个例子，展示了一个文本框输入元素：

<input type="text" id="inputBox" value="Hello world!">

在这个例子中，我们创建了一个输入框并为其设置了一个 id 属性值为 "inputBox"。

JavaScript 通过元素 id 获取输入框值

要获取输入框的值，我们需要使用 JavaScript。下面是代码片段，演示如何通过元素 id 获取输入框的值：

var inputBox = document.getElementById("inputBox");
var inputValue = inputBox.value;

在这个例子中，我们使用了 JavaScript 的 getElementById() 方法来获取元素，该方法需要传入要查找的元素的 id。然后，我们使用 value 属性获取输入框的值，并将其存储在变量 inputValue 中。

完整示例代码

下面是一个完整的示例代码，展示如何通过 HTML 元素的 id 获取输入框的值：

<!DOCTYPE html>
<html>
<head>
    <title>HTML 通过元素 id 获取输入框值 - JavaScript</title>
</head>
<body>
    <input type="text" id="inputBox" value="Hello world!">

    <button onclick="getValue()">获取输入框的值</button>

    <script>
        function getValue() {
            var inputBox = document.getElementById("inputBox");
            var inputValue = inputBox.value;
            alert(inputValue);
        }
    </script>
</body>
</html>

在这个例子中，我们创建了一个按钮，当用户单击它时，它将通过 JavaScript 获取输入框的值并显示 alert() 弹窗。