JavaScript获取input的值|极客笔记

JavaScript获取input的值

在网页开发中，经常需要获取用户输入的信息，其中input标签是常用的表单元素之一。通过JavaScript可以方便地获取input标签的值并进行相应的操作。本文将介绍如何使用JavaScript获取input的值，并给出相关示例代码。

获取input的值

在JavaScript中，可以通过document对象的getElementById方法来获取指定元素的值。假设有一个输入框如下所示：

<input type="text" id="inputValue" value="deepinout.com">

可以通过以下代码来获取该输入框的值：

var inputValue = document.getElementById('inputValue').value;
console.log(inputValue);

运行以上代码，可以在控制台中看到输出为”deepinout.com”。这里通过getElementById方法找到id为inputValue的元素，并通过value属性获取其值。

除了getElementById方法，还可以使用getElementsByName、getElementsByClassName等方法来获取相应的input元素。例如，假设有多个输入框如下所示：

<input type="text" name="inputName" value="deepinout.com">
<input type="text" name="inputName" value="Hello, deepinout.com">

可以通过以下代码来获取name为inputName的输入框的值：

var inputs = document.getElementsByName('inputName');
for (var i = 0; i < inputs.length; i++) {
    console.log(inputs[i].value);
}

运行以上代码，可以在控制台中看到输出为”deepinout.com”和”Hello, deepinout.com”。这里通过getElementsByName方法找到name为inputName的所有元素，并遍历输出它们的值。

示例代码

下面给出一个更完整的示例代码，演示了如何通过点击按钮来获取input输入框的值，并显示在页面上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Input Value</title>
</head>
<body>
    <input type="text" id="inputValue" value="deepinout.com">
    <button onclick="getValue()">Get Value</button>
    <p id="output"></p>

    <script>
        function getValue() {
            var inputValue = document.getElementById('inputValue').value;
            document.getElementById('output').innerText = 'Input value is: ' + inputValue;
        }
    </script>
</body>
</html>

在上述示例代码中，当点击按钮时会调用getValue函数，该函数获取id为inputValue的输入框的值，并将其显示在id为output的p标签中。可以在浏览器中运行以上代码，输入框的值将会显示在页面上。