JavaScript で入力値を変更する
このチュートリアルでは、JavaScript の value プロパティまたは setAttribute() 関数を使用して入力値を変更する方法について説明します。
JavaScript の value プロパティを使用して入力値を変更する
input タグを使用してユーザーからの入力を取得し、value プロパティを使用して入力値を変更できます。まず、ID または名前を使用して値を変更する要素を取得する必要があります。次に、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() 関数を使用して入力値を変更する
value プロパティの代わりに setAttribute() 関数を使用して、入力値を設定することもできます。getElementById() または querySelector() 関数の代わりに forms() 関数を使用して、フォーム名と入力名を使用して要素を取得することもできます。たとえば、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
ご覧のとおり、これらすべてのメソッドの出力は同じであるため、要件に応じて任意のメソッドを使用できます。
