JavaScript getElementByIdでIDから値を取得

JavaScriptのgetElementByIdでIDから値を取得するサンプルです。

getElementById	getElementByIdとは
	getElementByIdでvalue値を取得する
	getElementByIdで取得できているはずなのにnullになる
サンプル	背景色と文字の色を変える
	文字列を変える、表示非表示
	文字を入力するとその下に文字を表示する
	getElementByIdでボタンをクリックする(click)

getElementByIdとは

document.getElementById(idの値);

引数にidの値を指定して要素(Element)を取得します。
対象のidの値が存在しない場合はnullを返します。

getElementByIdを使用する例

以下はテキストボックスです。文字を入力できます。

上記テキストボックスのhtmlのコードです。

getElementByIdでテキストボックスに入力された値(value値)を取得するコードです。

const txt1 = document.getElementById("txt1").value;

getElementById("txt1").valueとした場合、指定されたidの値がある要素のvalueの値(red)を取得します。

get(取得する) + Element(要素) + ById(IDによって)＋valueの値です。

getElementById("txt1")とvalueを指定しない場合は、要素(<input type="text" id="txt1" value="red" maxlength="5">)を取得します。

getElementByIdでvalue値を取得する

<input type="text" id="text1" value="red" maxlength="5" />

<script>
    const str1 = document.getElementById("text1").value;
    console.log(str1); //red
</script>

4行目は、getElementByIdで1行目のvalue値を取得しています。

引数に変数を指定することも可能

<input type="text" id="text1" value="red" maxlength="5" />

<script>
    let textid = "text1";
    const str2 = document.getElementById(textid).value;
    console.log(str2); //red
</script>

4行目は、変数に値をセットしています。
5行目のようにgetElementByIdの引数に変数を指定することも可能です。

getElementByIdで探す範囲を絞ることも可能

<div id="div1">
  <div class="class1">test1</div>
</div>
<div id="div2">
  <div class="class1">test2</div>
</div>
<input type="button" value="変更" onclick="clickBtn2()" />

<script>
  const div2 = document.getElementById("div2");
  const test1 = div2.getElementsByClassName("class1");

  console.log(test1[0].textContent); //test2が出力される
</script>

10行目は、getElementByIdで対象(4～6行目)を指定しています。
11行目は、10行目の指定された範囲内でgetElementsByClassNameを実行します。

getElementByIdで取得できているはずなのにnullになる

getElementByIdを実行した時に、取得対象の要素がまだない場合nullになります。
getElementByIdの場所をコードの後ろに持ってくる。またはwindow.onloadでページ読み込み後にgetElementByIdを実行するようにします。

<input type="text" id="text1" value="red" maxlength="5" />

<script>
    window.onload = function () {
        const str1 = document.getElementById("text1").value;
        console.log(str1); //red
    };
</script>

getElementByIdで背景色と文字の色を変える

ボタンを押すとテキストボックス内の文字(value値)が変化し背景色が変わります。

上記サンプルのコードです。

<input type="text" id="input1" value="赤" maxlength="6" />
<input type="button" value="変更" onclick="clickBtn1()" />

<script>
  function clickBtn1() {
    const input1 = document.getElementById("input1");

    if (input1.value === "赤") {
      input1.value = "青";
      input1.style.background = "#87CEFA";
      input1.style.color = "red";
    } else {
      input1.value = "赤";
      input1.style.background = "rgb(250,128,114)";
      input1.style.color = "blue";
    }
  }
</script>

2行目のボタンを押すと5行目の関数を実行します。
6行目のgetElementByIdメソッドの引数のinput1は、1行目のidのinput1を指します。要素(オブジェクト)を取得します。
9行目からは、value値、背景色、文字色を設定しています。

getElementByIdで文字列を変える、表示非表示

ボタンを押すと1行目の文字列が代わり2行目の文字列が表示と非表示で切り替わります。

赤

テスト

上記サンプルのコードです。

<p id="p2">赤</p>
<p id="p3">テスト</p>
<input type="button" value="変更" onclick="clickBtn2()" />

<script>
  function clickBtn2() {
    const p2 = document.getElementById("p2");
    const p3 = document.getElementById("p3");

    if (p2.textContent === "赤") {
      p2.textContent = "青";
      p3.style.visibility = "hidden"; //非表示
    } else {
      p2.textContent = "赤";
      p3.style.visibility = "visible"; //表示
    }
  }
</script>

3行目のボタンを押すと6行目の関数を実行します。
7行目の引数のp2は、1行目のidのp2を指します。要素(オブジェクト)を取得します。
10行目は、textContentの文字を判定しています。
11,14行目は、文字を設定しています。
12,15行目は、文字列の表示と非表示を設定しています。

getElementByIdで文字を入力するとその下に文字を表示する

文字を入力するとリアルタイムで入力した文字が入力欄の下に表示されます。

文字を入力

上記サンプルのコードです。

<label for="text3">文字を入力</label>
<input type="text" id="text3" oninput="test3()" maxlength="20"/>
<p id="output1"></p>

<script>
    function test3() {
        const text3 = document.getElementById("text3");
        const output1 = document.getElementById("output1");
        output1.innerText = text3.value;
    }
</script>

getElementByIdでボタンをクリックする(click)

document.getElementById("test").click();

getElementByIdで対象を特定しclickメソッドでマウスをクリックしたときの動きになります。

<input type="button" value="b1" onclick="click1()" />
<input type="button" value="b2" id="b2" onclick="click2()" />

<script>
  function click1() {
    document.getElementById("b2").click();
  }
  function click2() {
    console.log("2つめのボタンクリック");
  }
</script>

1行目のボタンをクリックすると5行目の関数が実行され2行目のボタンがクリックされたときと同じ動きをします。