js 修改input的value值|极客笔记

js 修改input的value值

在Web开发中，我们经常会遇到需要使用JavaScript动态修改页面元素的值的场景，其中修改input的value值尤为常见。在本文中，我们将详细讨论如何使用JavaScript来修改input元素的value值，并提供一些示例代码帮助读者更好地理解。

获取input元素

首先，我们需要获取要修改value值的input元素。通常我们可以通过 document.getElementById() 或 document.querySelector() 方法来获取页面中的input元素。例如，假设我们有如下的input元素：

<input type="text" id="inputField" value="Hello, World!">

我们可以通过id来获取该input元素：

const inputElement = document.getElementById('inputField');

或者通过querySelector方法选择该元素：

const inputElement = document.querySelector('#inputField');

修改input的value值

一旦我们获取了input元素，我们就可以通过修改其value属性来改变其显示的值。例如，我们可以使用以下代码将input元素的值更改为”Hello, JavaScript!”：

inputElement.value = 'Hello, JavaScript!';

示例代码

下面我们提供一个完整的示例代码，演示如何使用JavaScript来修改input元素的value值，并在页面上展示出来：

<!DOCTYPE html>
<html>
<head>
    <title>Modify Input Value</title>
</head>
<body>
    <input type="text" id="inputField" value="Hello, World!">
    <button onclick="changeInputValue()">Change Value</button>

    <script>
        const inputElement = document.getElementById('inputField');

        function changeInputValue() {
            inputElement.value = 'Hello, JavaScript!';
        }
    </script>
</body>
</html>

在上述示例中，我们创建了一个包含一个input元素和一个按钮的简单HTML页面。当点击按钮时，调用changeInputValue()函数，将input元素的值修改为”Hello, JavaScript!”。