<input type="text">内のvalueを変更で背景色の変更

Question

###前提・実現したいこと
データベースから受け取ったvalueを初期値に（このコードでは無記入になっていますが…）、変更があればhtmlの<input type="text">の背景色を変える実装がしたいのですが、期待通りに動かなくて困ってます。

初歩的な質問でお恥ずかしいのですが、お力お借りできると大変助かります。よろしくお願いします。

###該当のソースコード

<form action="" name="form1">
    <input name="input_text" type="text" value="" oninput="bgColor()">
    <input name="input_text" type="text" value="" oninput="bgColor()">
    <input name="input_text" type="text" value="" oninput="bgColor()">
    <input name="input_text" type="text" value="" oninput="bgColor()">
</form>

<script>
    var elements = document.getElementsByName("input_text");
    elements.addEventListener("input", bgColor);

    function bgColor() {
        document.body.style.backgroundColor = "red";
    }

</script>

Answer 1

下記部分の elements は複数の要素をまとめて持っています。

var elements = document.getElementsByName("input_text");

そのため、下記のようにしないとイベントを扱うことが出来ません。

// elements.addEventListener("input", bgColor);
//           ↓「何番目」の指定が必要。
   elements[ 0 ].addEventListener("input", bgColor);

【document.getElementsByName() - nameで要素を取得する】
https://syncer.jp/javascript-reference/document-getelementsbyname

【getElementByIdとgetElementsByNameの違い - hogehoge foobar Blog Style5】
http://d.hatena.ne.jp/mrgoofy33/20100928/1285684451

【document.getElementsByName - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByName

---

また、イベントは addEventListener か oninput かどちらかに統一したほうが良いです。（ addEventListener のほうがお勧めです）
oninput を使う場合、bgColor という関数名を変えてみれば動くと思います。

---

エラーの確認にはデベロッパーツールを使うと発見が早くなります。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/

【Web関係者は知っておくべきGoogleChromeデベロッパーツールの使い方 | Ocadweb】
http://ocadweb.com/web/googlechromedevelopertools

Comments

[Scarlett]

ご丁寧にありがとうございます！

なるほど…。
何がダメなんだろう？と、ハマってました。
大変勉強になります。
無事動きました。

次回ハマらぬように、気を付けます…！
ありがとうございました。

Answer 2

    var elements = document.getElementsByName("input_text");
    elements.forEach(function(v){ v.addEventListener("input", bgColor); });

    function bgColor() {
        document.body.style.backgroundColor = "red";
    }

Comments

[Scarlett]

ありがとうございます！

大変助かりました…！！
こうして書けば良いんですね…。

勉強になりました。
ありがとうございました✨