Javascript: 動的にdocument.getElementByIdを生成する方法

Question

  let price_itme = $('#plan').children().length;
  //=> 要素が2つの時、document.getElementByIdを2つ生成したい
  for(let i=0;i<price_itme;i++){
    let dom1 = document.getElementById(`plan${i}`).style.display = "none";
    //let dom2 = document.getElementById(`plan${i}`).style.display = "none";
  }

実現したいこと

#planの配下にある、要素を取得して要素数分だけdocument.getElementByIdを生成したい。

困っていること
要素数分だけ、document.getElementByIdを生成する方法が分からない。

let arr = [];
for(let i=0;i<price_itme;i++){
    arr[i] = `document.getElementById(plan${i})`;
}
//=> ["document.getElementById(plan0)", "document.getElementById(plan1)"]

上記で、document. getElementByIdを生成することができました。
配列にdocumentを生成した場合、どのようにstyleを利かせばよいかご教示いただけると幸いです。

#plan
  select#sample.form-control name="select" onchange="SendAjax(this);" 
    option value="plan" id="item" data-price="plan"
      = 'item1'
    option value="plan2" id="item2" data-price="plan2"
      = 'item2'
    option value="plan3" id="item3" data-price="plan3"
      = 'item3'

  input type="text" value="plan1" id="plan"
  input type="text" value="plan2" id="plan1"
  input type="text" value="plan3" id="plan2"

//TODO: jsに書き換えたいな
  var plan_item = $('#plan').children().length;
  for(let i=0;i<plan_item;i++){
    //ここをどうにかしたい。
    document.getElementById(`plan${i}`).style.display = "none";
    document.getElementById(`plan${i}`).style.display = "none";
    document.getElementById(`plan${i}`).style.display = "none";
  }

  function SendAjax(obj)
  {
      // objはselectタグ
      let idx = obj.selectedIndex;
      let value = obj.options[idx].value // value
      let text = obj.options[idx].text; // apper text

      //ここもforで編集する予定
      const txt1 = document.getElementById("item");
      const txt2 = document.getElementById("item2");
      const txt3 = document.getElementById("item3");


      if(value != txt1.id || value != txt2.id || value != txt3.id)
      {
          txt1.style.display = "none";
          txt2.style.display = "none";
          txt3.style.display = "none";
      }
      if(value == txt1.id)
      {
          txt1.style.display = "block";
      }
      if(value == txt2.id)
      {
          txt2.style.display = "block";
      }
      if(value == txt3.id)
      {
          txt3.style.display = "block";
      }

      console.log(`TEXT: ${text} / VALUE: ${value}`);
      console.log(`txt_ID1: ${txt1.id}`);
  }

#試していること
evalを使って、jsコードを生成しようとしたのですがシンタックスエラーになってしまいました。
もし原因についてお分かりでしたら、ご教示いただけると幸いです。

for (var i = 0; i < 2; i++) {
　　eval("let arr" + i + "=" + "document.getElementById('" + `plan${i}` + "')" + ";");
}

//=> arr0をすると下記のエラーになってしまいます。
// VM546:1 Uncaught ReferenceError: arr0 is not defined
// at <anonymous>:1:1

Comments

[kei344]

HTMLも提示し、具体的に行いたい処理を提示されたほうが適切な回答を得れると思います。

[Lhankor_Mhy]

もしかして、「生成」というのは言葉のあやではなくて、まだ存在しない要素を生成しようとしているとかですか？

document. getElementById() は、すでに存在する要素を取得するメソッドですが、それは大丈夫でしょうか？

[nanase21]

htmlタグは存在していますが、dbから取ってくるデータの数によって要素の数が変わるので、事前にlet item= document.getElementById(plan1);みたいに変数を作って置くことが出来ないです。
なので、lenghtで要素の数を取得して要素分だけforで回してdocument.getElementByIdを作ろうとしていました。

[Lhankor_Mhy]

そうだとすると、元々のご提示のコードでも要素が消えるはずなんですよねえ……

といいますか、dbからのデータでhtmlタグを出力する際に style="display:none"みたいなことをしておいた方が話が早いような……？

[nanase21]

該当箇所のコードをhtml(slim)も含めて全て載せました。
やりたいこととしては、初期表示ではinputの要素を全て隠して、selectで選択したオプションに応じて該当するinputだけを表示する処理をイメージしています。

[Lhankor_Mhy]

とりあえず、maisumakunさんのコメントのとおり、配列には「document.getElementByIdの実行結果」を入れましょう。
evalとか必要ないです。

あとはループの範囲がおかしいのと、plan1が存在しないのが気になります。

[nanase21]

変に変数を作ろうとせずにdocument.getElementById(id${i} == 比較するもの)で比較し、該当したらdocument.getElementById(`id${i}`).style.display = "none";をするようにして解決できました。

Answer 1

jQuery を使用するならこれだけで消せると思いますよ。

$( '#plan > [id^="plan"]' ).hide();
```**動くサンプル：**[https://jsfiddle.net/cv3o8t14/](https://jsfiddle.net/cv3o8t14/)

---

【属性セレクタ - CSS: カスケーディングスタイルシート | MDN】
[https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors](https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors)

【.hide() | jQuery API Documentation】
[https://api.jquery.com/hide/](https://api.jquery.com/hide/)

Answer 2

回答依頼ありがとうございます。

気になる点が2点。

• dom1 には "none" が入ってそうな気がします。
• let はブロックスコープなので、for を抜けると参照できなくなりそうです。

生成自体はできていると思います。ただ、変数に納められていないと思いますので、適切に代入されてはいかがでしょうか。
ループを用いているので、配列に代入するのが無難なような気がします。

Answer 3

要素が2つの時、document.getElementByIdを2つ生成したい

そのままで問題ないのではないかと思います。ループが回れば、price_itmeの数だけgetElementByIdがk\実行されます。

Comments

[maisumakun]

（うまくいかないばあいは具体的に、どのようにうまく行かないのか書いていただければ幸いです）

[nanase21]

質問に今できていることを追記しました。
配列にdocumentを入れた時にcssを効かす方が分からないです。
最終的なイメージとしては、デフォルトでは要素を非表示にして、selectで選択した項目に応じて表示する内容を変更したいと考えています。

[maisumakun]

「document.getElementByIdという文字列」を入れるのではなくて、配列には「document.getElementByIdの実行結果」を入れましょう。

（配列に入れていない元のコードでも、それぞれ取った要素に対してCSSが効いていると思うのですが、なにかおかしいのでしょうか）

[nanase21]

質問に該当箇所のコードを全て載せました。
最終的にやりたいこととしては、初期表示ではinputの要素を全て隠して、selectで選択したオプションに応じて該当するinputだけを表示する処理をイメージしています。