83772


プログラムを最近独学で始めたのですが、インターネットで調べながらやってみたい動作が  
なかなか上手く動作しません。

下のプログラム単体では動くのですが、  
`elements`、`len`、`sele_val`を『`elements1`、`elements2`、`elements3`』といった形で増やす  
と動作しなくなってしまいます。

動かしたいプログラムとして、  
・『その他』を選択した時のみ、『その他詳細』を選択できるようにしたい。  
・同様の動作が１つのフォームで複数箇所あるため、まとめて書きたい  
なのですが、どうやってもうまく動きません。

下記、一つだけ書くと動くコードになります。  
何卒、ご指導のほどよろしくお願いいたします。

[code]

    function controlselect() {
        let elements = document.getElementsByClassName("disselect");
        let len = elements.length;
        var sele_val = document.getElementById("other").value;
        if(sele_val === "その他") {
            for (let i = 0; i < len; i++){
                elements.item(i).removeAttribute("disabled");
            }
        }else {
            for (let i = 0; i < len; i++){
                elements.item(i).setAttribute("disabled", true);
            }
        }
    }
    
[/code]


CC BY-SA 4.0
2021-11-22T10:52:04.457
83768
2021-11-23T02:03:04.613
2021-11-22T10:53:54.130
2376
49184
question
javascript html html5 form
Javascriptでフォーム調整プログラム（その他を選択時に追加の選択事項を表示、選択させる）を書きたいです


次のような形で実現できないでしょうか:

[code]

    // 引数で要素のグループを指定する
    function controlselect(target) {
      let elements = target.getElementsByClassName("disselect");
      let len = elements.length;
      // id は使えないので class に変更する
      var sele_val = target.getElementsByClassName("other")[0].value;
      if (sele_val === "その他") {
        for (let i = 0; i < len; i++) {
          elements.item(i).removeAttribute("disabled");
        }
      } else {
        for (let i = 0; i < len; i++) {
          elements.item(i).setAttribute("disabled", true);
        }
      }
    }
    
[/code]

* * *

実装例:  

[code]

    function controlselect(target) {
      let elements = target.getElementsByClassName("disselect");
      let len = elements.length;
      var sele_val = target.getElementsByClassName("other")[0].value;
      if (sele_val === "その他") {
        for (let i = 0; i < len; i++) {
          elements.item(i).removeAttribute("disabled");
        }
      } else {
        for (let i = 0; i < len; i++) {
          elements.item(i).setAttribute("disabled", true);
        }
      }
    }
    
    document.addEventListener("DOMContentLoaded", () => {
      const targets = ["elements1", "elements2", "elements3"];
      for (let t of targets) {
        const div = document.getElementById(t);
        div
          .getElementsByClassName("other")[0]
          .addEventListener("change", () => controlselect(div));
        controlselect(div);
      }
    });
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="UTF-8" />
        <title>title</title>
      </head>
      <body>
        <div id="elements1">
          <div>
            <select class="other">
              <option value="a">A</option>
              <option value="b">B</option>
              <option value="その他">OTHER</option>
            </select>
          </div>
          <div>
            <input type="text" class="disselect" />
            <input type="text" class="disselect" />
          </div>
        </div>
        <div id="elements2">
          <div>
            <select class="other">
              <option value="a">A</option>
              <option value="b">B</option>
              <option value="その他">OTHER</option>
            </select>
          </div>
          <div>
            <input type="text" class="disselect" />
            <input type="text" class="disselect" />
          </div>
        </div>
        <div id="elements3">
          <div>
            <select class="other">
              <option value="a">A</option>
              <option value="b">B</option>
              <option value="その他">OTHER</option>
            </select>
          </div>
          <div>
            <input type="text" class="disselect" />
            <input type="text" class="disselect" />
          </div>
        </div>
      </body>
    </html>
[/code]


CC BY-SA 4.0
2021-11-23T02:03:04.613
83772
2021-11-23T02:03:04.613
2808
83768
answer