JavaScript テキストボックスの値を取得/設定する

JavaScriptでテキストボックスの値を取得/設定するサンプルです。

目次	テキストボックスの値を取得する
	テキストボックスに値を設定する

テキストボックスの値を取得する

ボタンを押すとテキストボックスの値を取得し画面に表示します。

取得した値

入力欄：

実現方法

getElementByIdメソッドで場所(idの値)を指定し入力値(value値)を取得します。

変数 = document.getElementById(idの値).value;

上記サンプルのコード

<p>取得した値 <span id="span1"></span></p>
<input type="text" value="red" id="text1" maxlength="5" />
<input type="button" value="ボタン" onclick="clickBtn1()" />

<script>
  function clickBtn1() {
    const t1 = document.getElementById("text1").value;
    document.getElementById("span1").textContent = t1;
  }
</script>

2行目は、テキストボックスです。
3行目のボタンをクリックすると6行目の関数が実行されます。
7行目は、getElementByIdメソッドで2行目の「id="text1"」のtext1を指定し、valueで「value="red"」のredを取得しています。
8行目は、変数の値を1行目の「id="span1"」の箇所に表示します。

Idを指定しない場合

getElementByIdでIdを指定しない場合は、フォームとnameを指定します。

<p>取得した値 <span id="span1"></span></p>
<form name="form1">
  <input type="text" name="text1" value="red" maxlength="5" />
</form>
<input type="button" value="ボタン1" onclick="clickBtn1()" />

<script>
  function clickBtn1() {
    const t1 = document.form1.text1.value;
    document.getElementById("span1").textContent = t1;
  }
</script>

9行目は、2行目のフォームのname「form1」と3行目のテキストボックスのname「text1」で対象を特定(3行目)し、そのvalueから値を取得し変数「t1」に代入します。

テキストボックスに値を設定する

ボタンを押すとテキストボックスに値を設定します。

入力欄：

実現方法

getElementByIdメソッドで場所(idの値)を指定しvalueに値を設定します。

document.getElementById(idの値).value = 値;

上記サンプルのコード

<label for="text2">入力欄：</label>
<input type="text" value="red" id="text2" maxlength="5" />
<input type="button" value="ボタン" onclick="clickBtn2()" />
<input type="button" value="クリア" onclick="clickBtn3()" />

<script>
  function clickBtn2() {
    document.getElementById("text2").value = "blue";
  }
  function clickBtn3() {
    document.getElementById("text2").value = "";
  }
</script>

2行目は、テキストボックスです。id="text2"があります。
3行目のボタンをクリックすると6行目の関数が実行されます。
8行目は、getElementByIdメソッドで2行目のID「text2」を指定し、そのvalueの値に"blue"を代入しています。
テキストボックスをクリアする場合は、空文字("")をセットします。

Idを指定しない場合

getElementByIdでIdを指定しない場合は、フォームとnameを指定します。

<form name="form2">
  <input type="text" name="text2" value="red" maxlength="5" />
</form>
<input type="button" value="ボタン1" onclick="clickBtn3()" />

<script>
  function clickBtn3() {
    document.form2.text2.value = "blue";
  }
</script>

8行目は、1行目のフォームのname「form2」と2行目のテキストボックスのname「text2」で対象を特定(2行目)し、そのvalueの値に"blue"を代入しています。