複数のセレクトオプションに同じonchange関数を一括でつけたい。

実現したいこと

下記のソースコードに示すように、複数の各selectの背景の色を各valueの値に応じて変えたいです。
この例ではselectの数が少ないのでそれぞれにonchange関数を記述していますが、selectの数が多いとわざわざ記述するのが面倒です。
もう既に多くのselectを作っているのですが、一括でonchange関数を組み込むことはできないでしょうか？それとも地道に各selectに組み込むしかないのでしょうか？

該当のソースコード

HTML
1    <select onchange="changeColor(this)">
2        <option value="0">0</option>
3        <option value="1">1</option>
4    </select>
5    <select onchange="changeColor(this)">
6        <option value="0">0</option>
7        <option value="1">1</option>
8    </select>
9    <script>
10        var changeColor = function (el) {
11            if (el.value == "0") el.style.backgroundColor = "white";
12            else el.style.backgroundColor = "orange";
13    </script>

行動規範の内容に同意します

回答2件

ベストアンサー

モダンなコーディング手法では、htmlタグのなかにonchange属性などをかいて<select onchange="myFunc()">とすることは推奨されていません。

HTMLには構造だけ
CSSには装飾だけ
JSには処理だけ

というように、ファイル毎に役割を明確に分けるためです。
ということでJavaScriptファイルの中で、イベントをつけていくようにしましょう。
以下サンプルコードです。

html
1<select><!-- onchange削除 -->
2  <option value="0">0</option>
3  <option value="1">1</option>
4</select>
5<select><!-- onchange削除 -->
6  <option value="0">0</option>
7  <option value="1">1</option>
8</select>

javascript
1const SELECT_BOXES = document.querySelectorAll('select');
2SELECT_BOXES.forEach(select => select.addEventListener('change', changeColor));
3
4function changeColor(e) {
5    if (e.target.value == 0) {
6        e.target.style.backgroundColor = 'white';
7    } else {
8        e.target.style.backgroundColor = 'orange';
9    }
10}

動作確認サンプル： https://jsfiddle.net/j74dazm5/

解説

要素.addEventListener(種類, 関数名)で、1つの要素に1つのイベントをつけることができます。

種類には'change', 'click', 'mouseover', 'keydown'など色々あります。
関数名のところには、❌myFunc()とは書かず → ✅myFuncと( )なしで書きましょう。

しかし、SELECT_BOXES.addEventListener()とはかけません。

なぜなら、const SELECT_BOXES = document.querySelectorAll('select');は、[0番目のselect要素、1番目のselect要素]というように、取得してきたhtml要素が配列のようなものに格納されているからです。（厳密には配列ではありませんが）
❌配列.addEventListener()とはできなくて → ✅要素.addEventListener()の形にしないといけません。
そのため.forEach()で、配列のようなものの中に格納されている要素1つずつにaddEventListener()でイベントをつける必要があります。

投稿2022/10/02 05:08

編集2022/10/02 05:21

Cocode

総合スコア2314

回答へのコメント

Cocode

2022/10/02 05:21

1 -> 0にしたときに白色に戻らないバグ修正しました。

行動規範の内容に同意します

document.querySelectorAll ですべてのselect要素をとってきてforEachで回して各selectにchangeColor関数をchangeイベントリスナーとして設定すればよいです。具体的にはこんな感じです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <script>
6    document.addEventListener('DOMContentLoaded', function() {
7
8      const changeColor = function (el) {
9        if (el.value == "0") el.style.backgroundColor = "white";
10        else el.style.backgroundColor = "orange";
11      }
12
13      document.querySelectorAll('select').forEach(select => {
14        select.addEventListener('change', function() {
15          changeColor(this);
16        });
17      });
18
19    });
20  </script>
21</head>
22<body>
23<select>
24  <option value="0">0</option>
25  <option value="1">1</option>
26</select>
27
28<select>
29  <option value="0">0</option>
30  <option value="1">1</option>
31</select>
32
33<select>
34  <option value="0">0</option>
35  <option value="1">1</option>
36</select>
37
38<select>
39  <option value="0">0</option>
40  <option value="1">1</option>
41</select>
42</body>
43</html>
44