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