在 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
如你所见,所有这些方法的输出都是相同的,因此你可以根据需要使用任何你喜欢的方法。