JavaScript getElementByIdでIDから値を取得

nas2017/04/12

目次

01. getElementById

・getElementByIdとは

・getElementByIdでvalue値を取得する

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

02. getElementByIdを使用したサンプル

・背景色と文字の色を変える

・文字列を変える、表示非表示

・文字を入力するとリアルタイムで文字を表示する

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

・引数で呼び出した場所を区別

getElementByIdとは

document.getElementById(idの値);

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

 

getElementByIdを使用する例

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

 

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

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

 

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="click" 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="red" maxlength="6" />
<input type="button" value="click" onclick="clickBtn1()" />

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

        if (input1.value === "red") {
            input1.value = "blue";
            input1.style.background = "#87CEFA";
            input1.style.color = "red";
        } else {
            input1.value = "red";
            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行目の文字列が表示と非表示で切り替わります。

red

green

 

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

<p id="p2">red</p>
<p id="p3">green</p>
<input type="button" value="click" onclick="clickBtn21()" />

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

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

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

 

文字を入力するとリアルタイムで文字を表示する

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

 

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

<label for="text3">Please enter characters </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>

7行目でgetElementByIdを使用しています。

 

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

click1を押すとjsでclick2を押して文字列を表示します。

 

<p id="output31"></p>
<input type="button" value="click1" onclick="clickBtn31()" />
<input type="button" value="click2" id="b2" onclick="clickBtn32()" />
<input type="button" value="clear" onclick="clickBtn33()" />

<script>
    function clickBtn31() {
        document.getElementById("b2").click();
    }
    function clickBtn32() {
        output31.innerText = "second button click";
    }
    function clickBtn33() {
        output31.innerText = "";
    }
</script>

8行目は、3行目のボタンがクリックされたときと同じ動きをします。

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

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

 

引数で呼び出した場所を区別

関数は一つで、ボタンを押した箇所のみ処理を行います。

red

red

 

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

<p id="p11">red</p>
<input type="button" value="change" onclick="clickBtn(11)" />
<p id="p12">red</p>
<input type="button" value="change" onclick="clickBtn(12)" />
<script>
    function clickBtn(num) {
        const str = "p" + num;
        const ele1 = document.getElementById(str);

        if (ele1.textContent === "red") {
            ele1.textContent = "hidden";
            ele1.style.visibility = "hidden"; //非表示
        } else {
            ele1.textContent = "red";
            ele1.style.visibility = "visible"; //表示
        }
    }
</script>

7行目は、固定文字のPと変数(引数)の値でidを動的に作成します。

関連の記事

JavaScript getElementsByClassName クラスで取得
JavaScript 属性値を取得/設定/削除する(getAttribute)

△上に戻る