在 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
如你所見,所有這些方法的輸出都是相同的,因此你可以根據需要使用任何你喜歡的方法。