JavaScriptでforを使用して記述をスマートにしたい

Question

この処理を繰り返し処理などでもっとスマートに記述することは可能でしょうか？

            document.getElementById( "data_1" ).required = true;
            document.getElementById( "data_2" ).required = true;
            document.getElementById( "data_3" ).required = true;
            document.getElementById( "data_4" ).required = true;
            document.getElementById( "data_5" ).required = true;

Comments

[gentaro]

スマートかどうかはよくわかりませんが、for文を使うというアイデアまで辿り着いているなら、まずその線でご自身でコードを書いてみて、上手く行かない場合にエラーメッセージ等を添えて質問されてはどうでしょうか。

[mmmmmr]

繰り返しなのでforという安直なイメージはできたのですが、
文字列と変数をどのように組み合わせればいいかわからず漠然とした質問になってしまいました。
今後気をつけます。ご指摘ありがとうございます。

Answer 1

for ループなら、こんな感じでしょうか。

// #1
for( let i=0; i<5; ++i) {
  document.getElementById(`data_${i+1}`).required = true;
}


// #2
let data = {
  "1": true,
  "2": true,
  "3": true,
  "4": true,
  "5": true
}
for( let key in data ) {
  document.querySelector(`#data_${key}`).value = data[key]
}


// #3
let ary = [1,2,3,4,5];
for( let n of ary ) {
  document.querySelector(`#data_${n}`).value=true
}

追記）
スマートであるかの問題ではなく、自然数列をどう考えるかの問題です。

Comments

[mmmmmr]

こちらで理想の挙動となりました！
ありがとうございます。
JavaScriptについてまだまだ知見が浅いので、参考にさせていただきます。

Answer 2

document.querySelectorAll( '[id^="data_"]' ).forEach( n=> n.required = true );

【Document.querySelectorAll() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll