[JavaScript][PHP]エラーUncaught TypeError: document.getElementById(...) is null table

PHPで描写した数値がJSから読み取れない問題にハマった。

かなりハマった。。

特定のカラムを下記のようなSubmitで削除しようとするがエラーが出て、Submit出来ない。

<script>
function deletePost(e) {
  'use strict';
  if (confirm('本当に削除しますか?')) {
  document.getElementById('form_' + e.dataset.id).submit();
  }
}
</script>

エラー

Uncaught TypeError: document.getElementById(...) is null table

このエラーの解消はどこを探しても出てこなかった。

原因は、「テーブルのtd外ではPHPで描写したものは拾えない」ことが原因だったようで、下記のような書き方をするとエラーが出ます。x

<tbody>
<form action="{{ route('company_del', ['id'=>$list->id]) }}" id="form_{{ $list->id }}" method="post">
@csrf
    @if(count($company) > 0)
 	 @foreach ($company as $list)

 		<tr>
 		<td>{{ $list->id }}</td>
 		<td>{{ $list->code }}</td>
 		<td>{{ $list->name }}</td>
        <td>
        <button href="#" data-id="{{ $list->id }}" class="btn btn-outline-secondary" type="button" onclick="deletePost(this);">削除</button>
        </td>
 	 	</tr>
 	 @endforeach
  @else
<tr><td>ありません</td></tr>
 @endif


 </tbody>

これは、td内の$list->idが読めないので、data-idが取得できないのです。

上記のJSと組み合わせると「本当に削除しますか?」は出るけれど、Submitされないので、削除できない。

これをこのように書くとSubmitされて削除できるようになります。O

<tbody>

    @if(count($company) > 0)
 	 @foreach ($company as $list)

 		<tr>
 		<td>{{ $list->id }}</td>
 		<td>{{ $list->code }}</td>
 		<td>{{ $list->name }}</td>
        <td>
<form action="{{ route('company_del', ['id'=>$list->id]) }}" id="form_{{ $list->id }}" method="post">
@csrf
        <button href="#" data-id="{{ $list->id }}" class="btn btn-outline-secondary" type="button" onclick="deletePost(this);">削除</button>
</form>
        </td>
 	 	</tr>
 	 @endforeach
  @else
<tr><td>ありません</td></tr>
 @endif


 </tbody>

td内にformを入れ込む。

知っている人は当たり前なのかも知れないけれど、私は初めてでした。