JavaScript getElementByIdでIDから値を取得

目次

getElementByIdとは

document.getElementById(idの値);

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

get(取得する) + Element(要素) + ById(ID)です。

 

getElementByIdの使用例

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

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

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

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

テキストの値を取得する

<p id="text1">blue</p>

<script>
    let t1 = document.getElementById("text1").textContent;
    console.log(t1); //red
</script>

テキストの取得は、textContentを使用します。

引数に変数を使用

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

<script>
    let t1 = "text1";
    result = document.getElementById(t1).value;
    console.log(result); //red
</script>

引数に変数の指定は可能です。

getElementByIdで探す範囲を絞る

<div id="div1">
    <div class="color1">red</div>
    <div class="color1">yellow</div>
</div>
<div id="div2">
    <div class="color1">blue</div>
    <div class="color1">green</div>
</div>

<script>
    const d2 = document.getElementById("div2");
    const c1 = d2.getElementsByClassName("color1");

    console.log(c1[0].textContent); //blue
    console.log(c1[1].textContent); //green
</script>

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

 

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

事象
getElementByIdで取得できているはずなのにnullになる
➝getElementByIdを実行した時に、取得対象の要素がまだない場合nullになります。

解決策
getElementByIdの場所をコードの後ろに持ってくる。
またはwindow.onloadでページ読み込み後にgetElementByIdを実行するようにします。

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

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

 

テキストボックスの背景色と文字の色を変える

ボタンを押すとテキストボックス内の文字(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行目の関数を実行します。
8行目からは、value値、背景色、文字色を設定しています。

 

テキストの文字列を変える＋背景色を変える＋テキストの表示非表示

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

red

green

 

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

<p id="p2">red</p>
<p id="p3" style="background: green">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 = "green";
            p2.style.background = "green";
            p3.style.visibility = "hidden"; //非表示
        } else {
            p2.textContent = "red";
            p2.style.background = "transparent";
            p3.style.visibility = "visible"; //表示
        }
    }
</script>

3行目のボタンを押すと6行目の関数を実行します。
背景色の透明は16行目のtransparentを使用します。

 

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

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

Please enter characters

 

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

<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>

2行目はイベントハンドラのoninputを使用しています。input要素の値が変化したとき実行されます。
9行目はinnerTextを使用しています。

 

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

click1を押すとJavaScriptで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)