Javascript 投稿内容をクリックした際に色が変わるようにしたい

Question

前提・実現したいこと

javascriptでクリックすると既読がつく機能を実装しています。
rails をフレームワークは使ってます。

発生している問題・エラーメッセージ

クリックするとnot found404とエラーが出てしまいます。
エラーを確認するとXHR.send();でエラーが出ているとなってました。

エラーメッセージ
checked.js:14 GET http://localhost:3000/posts/null 404 (Not Found)
(anonymous) @ checked.js:14
checked.js:14 GET http://localhost:3000/posts/30 404 (Not Found)
(anonymous) @ checked.js:14
checked.js:14 GET http://localhost:3000/posts/31 404 (Not Found)
(anonymous) @ checked.js:14
checked.js:14 GET http://localhost:3000/posts/29 404 (Not Found)

該当のソースコード

checked.js

function check() {
  const posts = document.querySelectorAll(".post");
  posts.forEach(function (post) {
    if (post.getAttribute("data-load") != null) {
      return null;
    }
    post.setAttribute("data-load", "true");
    post.addEventListener("click", () => {
      // ここにクリックした時に行う「何らかの処理」を記述していく
      const postId = post.getAttribute("data-id");
      const XHR = new XMLHttpRequest();
      XHR.open("GET", `/posts/${postId}`, true);
      XHR.responseType = "json";
      XHR.send(); //<--ここでエラーが出ている
      XHR.onload = () => {
        if (XHR.status != 200) {
          alert(`Error ${XHR.status}: ${XHR.statusText}`);
          return null;          
        }
        const item = XHR.response.post;
        if (item.status != 200) {
          post.setAttribute("data-check", "true");
        } else if (item.checked === false) {
          post.removeAttribute("data-check");
        }
      };
    });
  });
}
setInterval(check,1000)

class PostsController < ApplicationController
  def index
    @posts = Post.all.order(id: "DESC")
  end
  
  def create
    Post.create(content: params[:content])
    redirect_to action: :index
  end

  def checked
    post = Post.find(params[:id])
    if post.checked 
      post.update(checked: false)
    else
      post.update(checked: true)
    end

    item = Post.find(params[:id])
    render json: { post: item }
  end
end

Rails.application.routes.draw do
  root to: 'posts#index'
  post 'posts', to: 'posts#create'
  get 'posts', to: 'posts#checked'
end

Answer 1

ルーティングで定義していないURLにリクエストを送っているので404になっています。

/posts/1や/posts/21などをposts#checkedに割り当てるには、以下のようにします。

get "/posts/:id", to: "posts#checked"

一般に、GET /posts/:idはposts#showに割り当てられるため、この設定はオススメしません。

私なら、PATCH /posts/:id/checkにします。

patch "/posts/:id/check", to: "posts#check"

// 試してないので動かないかも
XHR.open("PATCH", `/posts/${postId}/check`, true);

Comments

[wada_yusuke]

ありがとうございます、初めての質問で回答いただけたのでよかったです。
getは主にshowに割り当てられると初めて聞きました。またよろしくお願いします。