HTMLの複数のIDをjavascriptで一斉に呼び出したい

前提・実現したいこと

知識0から調べながら数独を作ろうと思っております。

今、1～9を入力するのを作っているところです。
とりあえず9マス(ゴールは81マス)作ってみたのですが、繰り返して書いているところをもう少し簡単にできればと思い、質問させていただきました。

htmlのID（num1_1 ～　num1_9）をjavascriptで呼び出すときに
一斉に呼び出す方法はないのかを教えていただきたいです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" href="sudoku.css">
9    <script src="sudoku.js" defer></script>
10<body>
11    
12        <select name="num1_1" id="num1_1"></select>
13        <select name="num1_2" id="num1_2"></select>
14        <select name="num1_3" id="num1_3"></select>
15        <select name="num1_4" id="num1_4"></select>
16        <select name="num1_5" id="num1_5"></select>
17        <select name="num1_6" id="num1_6"></select>
18        <select name="num1_7" id="num1_7"></select>
19        <select name="num1_8" id="num1_8"></select>
20        <select name="num1_9" id="num1_9"></select>
21</body>
22</html>
23

javascript

function
1    document.createElement('option');
2};
3
4function takaki(i,num1_j){
5    let option = document.createElement('option');
6    option.setAttribute('value',i);
7    option.innerHTML = i ;
8    num1_j.appendChild(option);
9}
10
11let num1_1 = document.getElementById("num1_1");
12let num1_2 = document.getElementById("num1_2");
13let num1_3 = document.getElementById("num1_3");
14let num1_4 = document.getElementById("num1_4");
15let num1_5 = document.getElementById("num1_5");
16let num1_6 = document.getElementById("num1_6");
17let num1_7 = document.getElementById("num1_7");
18let num1_8 = document.getElementById("num1_8");
19let num1_9 = document.getElementById("num1_9");
20
21
22const num = [num1_1,num1_2,num1_3,num1_4,num1_5,num1_6,num1_7,num1_8,num1_9];
23
24
25cre();
26for (let j=0 ;j<9 ;j++){
27    for(let i =0 ; i<=9 ; i++){
28        takaki(i,num[j]);       
29    };
30};

試したこと

配列を使って
[num1_1,num1_2,num1_3,...,num1_9]
として
for文を使ってやろうとしたのですが
htmlの時点でnum1_1～num1_9を書いてしまっているので
どうにもできませんでした。。。

補足情報（FW/ツールのバージョンなど）

VSコードを使っています

m.ts10806

2021/03/07 10:46 編集

＞簡単なリファクタリング「簡単」の観点が自身なら自身でリファクタリングの目標やルール決めてやるべきでは。観点が「回答者」なら不要な表現です。あとコードやエラーはすべてマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2021/03/07 10:47

>初心者です。「初心者アイコン」をつけるのにとどめてください。要件とは別の話なので、タイトルや本文には不要です。

shidada

2021/03/07 10:50

知り合いに質問しながらやっていたのですが、「あとは、簡単だね」と言われてしまったので、簡単と表記致しました。申し訳ありません。具体的には、HTMLのID名のつけ方が問題なのか、それともjavascriptの方でなんとかなるのか、コードを書いて欲しいというわけではなく、アドバイスを頂きたいという気持ちであります。

m.ts10806

2021/03/07 10:50

その知り合いに聞けば良いのでは。ひとまず、質問編集してください。

shidada

2021/03/07 11:27

返信遅くなり、申し訳ありません。質問の仕方を変えてみました。

m.ts10806

2021/03/07 11:29

JavaScriptのほうもマークダウン対応を。「ルールにのっとって記載された情報を変換する機能」なのでそのように書けば幾つでもできます。 https://teratail.com/questions/238564

shidada

2021/03/07 12:05

m.ts1086様ありがとうございます。質問が一回目で何も分からずご迷惑をおかけしてしまいましたが、マークダウンの方法に限らず、「質問を編集してください」と率直なご指摘など、とても感謝致します。ありがとうございました。

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

回答1件

ベストアンサー

forループを使ってselect要素を取得すればいいでしょう。

js
1function takaki(i,num){
2  let option = document.createElement('option');
3  option.value = i;
4  option.text = i ;
5  num.appendChild(option);
6}
7
8for(let i =1 ; i<=9 ; i++){
9  let num1 = document.getElementById("num1_" + i);
10  for(let i =0 ; i<=9 ; i++){
11    takaki(i,num1);       
12  };
13};