Q&A
エラー文を記載してください。
（なんとなくどんなエラー出てるかわかるけど）
繰り返しの処理をconstで使用したい
javascriptを勉強中です。
下記の"tab01"とある部分を"tab[i]"と置き換え繰り返しの処理にする方法はありますでしょうか？
試したコードではエラーとなりました。
const tab01 = document.getElementById('tab01');
試したコード
for (var i=0; i<18; i++) { const tab[i] = document.getElementById('tab[i]'); }
追記修正
html
1<div class="container"> 2<div class="row"> 3</div> 4 <h1 class="col-sm-6 text-center">兵力計算</h1> 5 6 7<%= form_with model: @busho, url: main_index_path, local: true do |f| %> 8 9 <div id="enemy" class="form-group row col-sm-6 py-0 my-0" data-json = <%= @busho_json %> > 10 <%= f.label :name, '相手武将', {class:"col-3 col-form-label text-nowrap"} %> 11 <div class="col-6"> 12 <%= f.collection_select(:enemy_id, @busho, :bu_id, :name, {}, {class:"form-control form-control-sm", id:"enemy_id"}) %> 13 </div> 14 <span class="col-3 text-nowrap" id="enemy_sen"><%= @senjutsu %></span> 15 </div> 16 <div id="ally" class="form-group row col-sm-6 py-0 my-0"> 17 <%= f.label :name, '味方武将', {class:"col-3 col-form-label text-nowrap"} %> 18 <div class="col-6"> 19 <%= f.collection_select(:busho_id, Busho.all, :bu_id, :name, {}, {class:"form-control form-control-sm", id:"ally_id"}) %> 20 </div> 21 <span class="col-3 text-nowrap" id="ally_sen"><%= @senjutsu %></span> 22 </div> 23 24 <div class="form-group row col-sm-6 py-0 my-0" id="enemy_power"> 25 <%= f.label :name, '相手兵力', {class:"col-3 col-form-label text-nowrap"} %> 26 <div class="col"> 27 <%= f.number_field :float, class:"min form-control form-control-sm block", id:"min", placeholder:"下限" %> 28 <%= f.number_field :float, class:"max form-control form-control-sm block", id:"max", placeholder:"上限" %> 29 </div> 30 </div> 31 <div class="form-group row col-sm-6 py-0 my-0" id="kishu"> 32 <%= f.label :name, '奇襲効果', {class:"col-3 col-form-label text-nowrap"} %> 33 <div class="col"> 34 <%= f.select :kishu, [["-0%", 0], ["-30%", 0.3], ["-60%", 0.6], ["-100%", 1]], {}, {class:"form-control form-control-sm", id:"busho_kishu"} %> 35 </div> 36 </div> 37 38 39 <div id=""> 40 <%= f.submit "計算" ,class:"col-sm-6 btn btn-sm btn-outline-primary btn-block my-0", id:"btn" %> 41 </div> 42<% end %> 43 44<table class="col-sm-6 mt-2 text-center text-nowrap" border="2"> 45<thead> 46 <tr> 47 <th></th> 48 <th>敵将アリ</th> 49 <th>敵将ナシ</th> 50 </tr> 51</thead> 52<tbody> 53 <tr> 54 <th>味方<br>アリ</th> 55 <td> 56 <table class="col text-center text-nowrap"> 57 <tr> 58 <th>有利</th> 59 <th>同値</th> 60 <th>不利</th> 61 </tr> 62 <tr> 63 <td><span id="tab0">-</span></td> 64 <td><span id="tab1">-</span></td> 65 <td><span id="tab2">-</span></td> 66 </tr> 67 </table> 68 </td> 69 <td> 70 <table class="col text-center text-nowrap"> 71 <tr> 72 <th>有利</th> 73 <th>同値</th> 74 <th>不利</th> 75 </tr> 76 <tr> 77 <td><span id="tab3">-</span></td> 78 <td><span id="tab4">-</span></td> 79 <td><span id="tab5">-</span></td> 80 </tr> 81 </table> 82 </td> 83 </tr> 84 <tr> 85 <th>味方<br>ナシ</th> 86 <td> 87 <table class="col text-center text-nowrap"> 88 <tr> 89 <th>有利</th> 90 <th>同値</th> 91 <th>不利</th> 92 </tr> 93 <tr> 94 <td><span id="tab6">-</span></td> 95 <td><span id="tab7">-</span></td> 96 <td><span id="tab8">-</span></td> 97 </tr> 98 </table> 99 </td> <td> 100 <table class="col text-center text-nowrap"> 101 <tr> 102 <th>有利</th> 103 <th>同値</th> 104 <th>不利</th> 105 </tr> 106 <tr> 107 <td><span id="tab9">-</span></td> 108 <td><span id="tab10">-</span></td> 109 <td><span id="tab11">-</span></td> 110 </tr> 111 </table> 112 </td> 113 </tr> 114</tbody> 115</table> 116 117</div>
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
HTMLどうなってるんでしょう。
このコード単体ではエラーが出ていませんでした。
>試したコードではエラーとなりました。
と自分で書いてるのに????
その後に tab[i].innerHTML ="" という部分があり以下のエラーが発生していました。
Uncaught TypeError: Cannot set property 'innerHTML' of null
at HTMLInputElement.<anonymous> (main.js:62)
(anonymous) @ main.js:62
ええ。ですから、その確認をすべく「HTMLを」と追記修正依頼に書いたのですが、
質問本文に反映される様子が一切ないので困っています。
質問の意図する部分を理解していませんでした。すいません。
質問の本文にhtmlを追記します。
あ、エラーってそっちのエラーだったんですね・・・。
コピペで起きてる現象再現できないと応えられないことの方が多いです。
回答者の勝手な都合で勝手に補完した部分が１つでもあれば、それはもう別物ですし。
回答3件
0
ベストアンサー
エラーの原因
変数tabを宣言時（初期化前）に、配列インデックスを使用しようとしているため、プロパティが無いなどのエラーが起きていると思われます。
配列を使いましょう。
javascript
1const tab = []; 2 3for (var i=0; i<18; i++) { 4 tab.push(document.getElementById('tab' + i)); 5}
配列は、勉強してほしいですが、簡単に言うと、
複数のデータをインデックスで呼び出せる、データ集合体、というイメージです。
投稿2021/01/19 16:41
総合スコア9555
下記のように変更したところ思い通りの動きになりました。ありがとうございました。
```
let tab = new Array(12);
for (var i=0; i<12; i++) {
tab[i] = document.getElementById('tab'+ i );
}
```
0
for (var i=0; i<18; i++) {
const tab[i] = document.getElementById('tab'+[i]);
}
投稿2021/01/19 16:36
総合スコア46
低評価したわけではないですが、
+[i]
とオブジェクトにして正しく参照できましたっけ？
変数宣言時に、[]を使うのは、構文エラーになるかと思いますが。
（ECMAScriptのバージョンによって可能ならすみません）
miyabi_takatsukさん
補足ありがとうございます。違和感あったので自分でも確認しましたが、動きますね。
ajhさん
ただ、回答に何の説明もなし、マークダウンもなしは不親切です。
（他にもそういう回答多すぎです）
低評価理由は聞きたいところ。
> 動きますね。
なんと。
ブラウザでいけた感じですか？
自分も確認してみます。
あいや、paiza.ioでやってみただけです。
ブラウザでは動かないようです。
今回の要件だと、HTMLなので、ブラウザなので、
低評価は避けれなさそうですね。
paiza.ioではなぜ動くのか気になりますw
paiza.io で動きます？
wandbox だと次の結果になりました。
https://wandbox.org/permlink/ZT49o4Zpzm0LQ6cS
あ、確認したのは2021/01/20 06:13のコメント通り+[i]のほうです。
https://paiza.io/projects/cgDp-pqP3PN4_0pMC4yP4Q
const tab[i]での宣言のほうは同じ結果です。
先にこれ提示しておけばよかったですね。
家の用事入ってきて結果確認してコメントしてすぐ閉じてしまったので、、
[i] は要素数一つの配列ですね。そちらなら文法上の問題なく文字列化できると思います。違和感はすごいですが。
はい。あくまで配列なので、そのまま文字列連結できるという点に違和感がありました。
配列⁺配列でpushされた配列が作られるなら合点がいくのですけどね。
そういうことか。なるほどですね。
0
javascript
1const tab=[...document.querySelectorAll('[id]')].filter(x=>x.getAttribute("id").match(/^tab(?=(0[1-9]|1[0-8])$)/)) 2
投稿2021/01/20 01:01
総合スコア116661
あなたの回答
tips
プレビュー
