いいね機能実装時、Uncaught TypeErrorが出るため非同期で動かない

###はじめに
いいね機能実装時、非同期でいいねができないためてこずっています。
エラーの解決方法を教えて欲しいです。

参考サイト https://techtechmedia.com/favorite-function-rails/

###エラー文
VM1260:1 Uncaught TypeError: Cannot set property 'innerHTML' of null

###行ったこと
エラー文の概要を調べたところhtmlを読み込むまえにjavascriptが読み込まれてるからとかいてありました。
なのでそれを改善するためにはbodyタグの前にscriptタグで記述したりするのかなと思っているのですが、
js.erbファイルの場合はどのような記述をすればいいのか教えて欲しいです。

###コード

layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>OldFashion</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  
  </body>
  <%= javascript_pack_tag 'application'%>
</html>

likes_controller.rb

class LikesController < ApplicationController
  before_action :item_params

  def create
    Like.create(user_id: current_user.id, item_id: params[:id])
  end

  def destroy
    Like.find_by(user_id: current_user.id, item_id: params[:id]).destroy
  end

  private

  def item_params
    @item = Item.find(params[:id])
  end
end

views/likes/create.js.erb

document.getElementById("item_<%= @item.id %>").innerHTML = '<%= j(render @item) %>'

views/likes/destroy.js.erb

document.getElementById('item_<%= @item.id %>').innerHTML = '<%= j(render @item) %>'

items/index.html.erb

<% @items.each do |item| %>
  <tr id="item_<%= item.id %>">
    <%= render "items/item", item: item %>
  </tr>
  <% end %>

views/items/_item.html.erb


  <div class='item-contents'>
    <div class = 'timeline'>
      <div class = 'timeline-column'>
        <div class = 'image-field'>
          <%= image_tag(item.image , class:'timeline-image') %>
        </div>
  
        <div class = 'item-body'>
          <div class = 'item-body-contents'>
  
            <div class= 'item-profile'>
              <div class= 'item-profile-icon'>
              <% if item.profile.image.present? %>
              <%= link_to image_tag(item.profile.image, class:'mini-image') , "/profiles/#{item.profile.id}/show_user" %>
              <% else %>
              <span class= 'image-text' >NO IMAGE</span>
              <% end %>
              </div>
              <div class= 'item-profile-name'>
                <p class= 'mini-name'>
                <%= item.profile.name %>
                </p>
              </div>
              <% if current_user.liked_by?(item.id) %>
                <td><%= link_to 'いいねを外す', destroy_like_path(item), method: :DELETE, remote: true %><%= item.likes.count %></td>
              <% else %>
                <td><%= link_to 'いいね', create_like_path(item), method: :POST, remote: true %><%= item.likes.count %></td>
              <% end %>
              <% if item.user_id == current_user.id %>
                <div class = 'item-option'>
                    <div class = 'item-option-btn' >
                      <%= link_to('#', class: 'option-btn') do%>
                      <%= image_tag 'gear_icon.png' ,class: 'item-btn-icon'%>
                      <% end %>
                    </div >
                </div>
              <% end %>
            </div>
            
            <div class = 'item-detail'>
              <p class = 'detail-title'>Title</p>
              <p class = 'detail-message'>
              <%= item.title %>
              </p>
            </div>
  
            <div class = 'item-detail'>
              <p class = 'detail-title'>Category</p>
              <p class = 'detail-message'>
              <%= item.category.name %>
              </p>
            </div>
  
            <div class = 'item-detail-tag'>
              <p class = 'detail-title'>Tag</p>
              <p class = 'detail-message'>
              <% unless item.tags.empty? %>
              <% item.tags.each do |tag| %>
                #<%=tag.tag_name %>
              <%end %>
              <% else %>
              未記入
              <% end %>
              </p>
            </div>
  
            <div class = 'item-information'>
              <p class = 'detail-title'>Information</p>
              <p class = 'detail-message-information'>
              <% unless item.information.empty? %>
              <%= item.information %>
              <% else %>
              未記入
              <% end %>
              </p>
            </div>

            <div class= 'post-time-box'>
            <p class= "post-time">投稿日<%= item.created_at.to_s(:datetime_jp) %></p>
            </div>
  
          </div>
        </div>
        
      </div>
    </div>
  </div>

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

回答1件

自己解決

###行ったこと
参考サイトを忠実に再現しすぎたせいでhtmlの<tr>タグと<td>タグをそのまま使っていたのが原因でした。

<tr>タグと<td>タグをdivタグに変更することで解決しました。頭の固さを直そうとします。。。笑 ###before index.html.erb ``` <% @items.each do |item| %> <tr id="item_<%= item.id %>"> <%= render "items/item", item: item %> </tr> <% end %> ``` item/_item.html.erb ``` <% if current_user.liked_by?(item.id) %> <td><%= link_to 'いいねを外す', destroy_like_path(item), method: :DELETE, remote: true %><%= item.likes.count %></td> <% else %> <td><%= link_to 'いいね', create_like_path(item), method: :POST, remote: true %><%= item.likes.count %></td> <% end %> ``` ###after index.html.erb ``` <% @items.each do |item| %> <div id="item_<%= item.id %>"> <%= render "items/item", item: item %> </div> <% end %> ```

items/_item.html.erb

<% if current_user.liked_by?(item.id) %>
   <%= link_to 'いいねを外す', destroy_like_path(item), method: :DELETE, remote: true %><%= item.likes.count %>
<% else %>
   <%= link_to 'いいね', create_like_path(item), method: :POST, remote: true %><%= item.likes.count %>
<% end %>

投稿2021/03/17 06:08

koukinagano

総合スコア1