JavaScriptのinnerHTMLが一箇所のみ反映される…

LaravelのViewでidを取得し、それに対してBadgeを当てはめることをしたいのですが、一箇所のみ反映されその他の記事に対しては反映されません。

上の画像のテーブルの右側の列の１行目には休業日のタグがついていますが、２行目にはついていません。各行につけるにはどうしたらいいでしょうか。

main.js

JavaScript
1'use strict';
2{
3 const event = document.getElementById('event');
4    const calendar = document.getElementById('calendar');
5    const other = document.getElementById('other');
6    var i;
7    if(calendar!=null){
8        calendar.innerHTML="<span class='badge badge-success'>休業日</span>";
9    }else if(other!=null){
10        other.innerHTML="<span class='badge badge-success'>その他</span>";
11    }else if(event != null){
12        event.innerHTML="<span class='badge badge-success'>イベント</span>";
13    }
14};

welcome.blade.php(tableのみ抜粋）

PHP
1                 <table class="table table-sm table-striped">
2  <thead>
3    <tr>
4 
5    <th scope="col" style="width:100px;">更新日</th>
6    <th scope="col" colspan="2" style="width:100px;">タイトル</th>
7    </tr>
8    
9  </thead>
10  <tbody>
11    <tr >
12    <?php 
13  $i=0;
14
15    ?>
16    @foreach($post as $posts)
17    <?php
18    if($i>4){
19      
20    break;
21
22    }else{
23      $i++;
24    }
25    ?>
26    <td>   {{ date('Y-m-d',strtotime($posts->updated_at)) }}</td>
27      <td>   <a href="{{-- url('/page/'.$posts->id )--}} {{action('PostsController@page',$posts) }}">{{ $posts->title }}</a></td>
28  <td><span　id="{{$posts->type}}"></span></td>
29    </tr>
30    <tr>
31    @endforeach
32
33  </tbody>
34</table>

###補足

####main.jsについて

デベロッパーツールのコンソールにはmain.jsのエラーが表示されませんでした。
Webを開いた際のソース表示では、<span＞タグとidなどはしっかり表示され、IDの内容も取得できていました。
main.jsの読み込みはwelcome.blade.phpの下（<head>内ではない）に読み込み設定をしました。

###その他

doument.getElementByIdでは一箇所でしか機能しないのでしょうか

どなたかご親切な方ご教授いただければ幸いです。
よろしくお願いいたします。

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

回答3件

同じIDを使った要素が複数あるのはルール違反です。
classにしてください。

投稿2019/05/31 02:36

退会済みユーザー

総合スコア0

y_ymo10

2019/05/31 03:22

yodhi0819さん対応ありがとうございました。解決いたしました。 IDについてあまり知識がありませんでした。またご教授お願いいたします。

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

ベストアンサー

doument.getElementByIdでは一箇所でしか機能しないのでしょうか

はい。それは後述するとして
if-elseの捉えかたも間違ってる気がします。

js
1    if(calendar!=null){
2        calendar.innerHTML="<span class='badge badge-success'>休業日</span>";
3    }else if(other!=null){
4        other.innerHTML="<span class='badge badge-success'>その他</span>";
5    }else if(event != null){
6        event.innerHTML="<span class='badge badge-success'>イベント</span>";
7    }

if-elseは条件式に一致した処理のみ行って後はスルーします。
ご提示のコードだとcalendar!=nullが満たされればスルーです。
別の変数を見るのでしたらelseでつながなくても良いと思います。

あとforeach内でidを振っていますがHTMLには「同一IDが画面に存在してはいけない」という規則があります。
特にJavaScriptはその影響を受ける言語です。
もし「画面内に複数出現することがある」のが前提の項目なのであればclassで振り、getElementsByClassName()
で取得したうえで、取得したHTMLCollectionをループすると良いでしょう。

というか、後からJavaScriptで入れこむのではなく、blade内でifで$posts->typeを判定して出力ラベルを決定すれば良いのではないでしょうか。

投稿2019/05/31 02:47

編集2019/05/31 03:44

m.ts10806

総合スコア80850

y_ymo10

2019/05/31 03:00

度々お世話になります。対応ありがとうございます。一点質問があるのですが、getElementsByClassName()で取得した際に、値は配列化されるのでしょうか。

m.ts10806

2019/05/31 03:07

回答のちょっと書きましたしリファレンスにも書いてあるのですが、返ってくるのはHTMLCollectionです。ループして値を参照します。機能名にヒントもあったりします。getElement[s]ByClassName 取得する要素が複数ある可能性があるので、複数形なのです。

y_ymo10

2019/05/31 03:16

対応ありがとうございます。解決いたしました。やはり、bladeで判定をして正解でした。

m.ts10806

2019/05/31 03:17

JavaScriptのget～～の使い方は覚えておいたほうが良いです（あとidのルールも）ベストアンサーを移し替えたようですが、元の回答にも一言つけておいてくださいね。

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

PHP
1     @if($posts->type=="event")
2  <td><span class='badge badge-success'>イベント</span></td>
3      @elseif($posts->type=="calendar")
4<td><span class='badge badge-success'>休業日</span></td>
5      @elseif($posts->type=='other')
6      <td><span class='badge badge-success'>その他</span></td>
7      @endif