JavaScript getElementByIdでIDから値を取得

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

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

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

テキストの値を取得する

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

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

4行目は、textContentで1行目のPタグに挟まれたテキストの値のredを取得しています。

引数に変数は可能

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

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

4行目は、変数のt1に文字列をセットしています。
5行目は、4行目の変数のt1を使用してvalue値を取得しています。

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を実行するようにします。

以下は、window.onloadを使用した例です。

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

2行目をクリックすると7行目の関数が実行されます。
8行目は、getElementByIdで対象の3行目を特定しclickメソッドで3行目のボタンをマウスでクリックしたときの動きになります。

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

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

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

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と2,4行目のクリック時の引数の数値(11 or 12)を得て変数を作成します。
8行目は、7行目の変数で対象を特定します。

getElementByIdで対象を指定してaddEventListenerを使用する

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

<button id="buton1">click</button>
<script>
    const btn1 = document.getElementById("buton1");

    btn1.addEventListener("click", () => {
        alert("test");
    });
</script>

3行目は、1行目のボタンを指定しています。
5行目は、addEventListenerでクリック時アラートのダイアログを表示します。