在 JavaScript 中更改输入值

Ammar Ali 2023年1月30日 2021年10月2日
  1. 使用 JavaScript 中的 value 属性更改输入值
  2. 使用 JavaScript 中的 setAttribute() 函数更改输入值
在 JavaScript 中更改输入值

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

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

Author: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

相关文章 - JavaScript Input