在 JavaScript 中更改输入值

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中更改输入值

作者：迹忆客最近更新：2024/03/20 浏览次数：

本教程将讨论在 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>

输出：

Some Value
New value

如你所见，所有这些方法的输出都是相同的，因此你可以根据需要使用任何你喜欢的方法。

上一篇：JavaScript 清除输入

下一篇：如何在 JavaScript 中获取输入值

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享