在 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