在 JavaScript 中更改输入值

JavaScript 2周前 23

本教程将讨论在 JavaScript 中使用 value 属性或 setAttribute() 函数更改输入值。

使用 JavaScript 中的 `value` 属性更改输入值

我们使用 input 标签来获取用户的输入，我们可以使用 value 属性来更改输入值。首先，我们需要使用 id 或 name 获取要更改其值的元素，然后我们可以使用 value 属性将其值设置为我们想要的值。要在 JavaScript 中获取元素，我们可以使用 getElementById() 或 querySelector() 函数。例如，让我们创建一个带有输入的表单，并为其指定一个 id 以使用 getElementById() 获取 JavaScript 中的元素，并使用 value 属性设置其值。请参考下面的代码。

<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
    <input type="text" id= "123" name="ABC" value="Some Value">
</form>
</body>
<script type="text/javascript">
var Myelement = document.getElementById("123");
console.log(Myelement.value);
Myelement.value = "New value";
console.log(Myelement.value);
</script>
</html>

输出：

Some Value
New value

在上面的代码中，我们使用 document.getElementById() 函数通过其 id 获取元素，在下一行，我们使用 console.log() 函数打印当前输入值。之后，我们使用 value 属性将输入值设置为我们想要的值，之后，我们在控制台上打印新值。你还可以使用 querySelector() 函数来选择要更改其输入值的元素。例如，让我们使用 querySelector() 函数重复上述示例。请参考下面的代码。

<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
    <input type="text" id= "123" name="ABC" value="Some Value">
</form>
</body>
<script type="text/javascript">
var Myelement = document.querySelector('input[name="ABC"]');
console.log(Myelement.value);
Myelement.value = "New value";
console.log(Myelement.value);
</script>
</html>

输出：

Some Value
New value

在上面的代码中，我们使用了 querySelector() 函数来获取元素。

使用 JavaScript 中的 `setAttribute()` 函数更改输入值

我们还可以使用 setAttribute() 函数代替 value 属性来设置输入值。我们还可以使用 forms() 函数而不是 getElementById() 或 querySelector() 函数来使用表单名称和输入名称获取元素。例如，让我们用 setAttribute() 和 froms() 函数重复上面的例子。请参考下面的代码。

<!DOCTYPE html>
<html>
<head></head>
<body>
<form name="FormABC">
    <input type="text" id= "123" name="ABC" value="Some Value">
</form>
</body>
<script type="text/javascript">
var Myelement = document.forms['FormABC']['ABC'];
console.log(Myelement.value);
Myelement.setAttribute('value','New value');
console.log(Myelement.value);
</script>
</html>