前提・実現したいこと
メモの既読機能をjavascriptで実装しています。
メモをクリックすると灰色の色が付いて既読を判断する仕組みです。
発生している問題・エラーメッセージ
実際にクリックをすると400エラーになってしまい実行できません。
検証でXHR.send()のところがうまくいいていないみたいなのですが、何が原因かがわかりません。何が原因でしょうか?
エラーメッセージ Failed to load resource: the server responded with a status of 400 (Bad Request)
該当のソースコード
js
function check() { const memos = document.querySelectorAll(".memo"); memos.forEach(function (memo) { if (memo.getAttribute("data-load") != null) { return null; } memo.setAttribute("data-load", "true"); memo.addEventListener("click", () => { const memoId = memo.getAttribute("data-id"); const XHR = new XMLHttpRequest(); XHR.open("GET", `/memos/${memoId}`, true); XHR.responseType = "json"; XHR.send(); XHR.onload = () => { if (XHR.status != 200) { alert(`Error ${XHR.status}: ${XHR.statusText}`); return null; } const item = XHR.response.memo; if (item.checked === true) { memo.setAttribute("data-check", "true"); } else if (item.checked === false) { memo.removeAttribute("data-check"); } }; }); }); } setInterval(check, 1000);
ruby
<div class="memos"> <% @memos.each do |memo| %> <div class="memo" data-id = <%= memo.id %>data-check=<%= memo.checked %>> <div class="memo-item"><%= memo.item %></div> <div class="memo-text"><%= memo.text %></div> </div> <% end %> </div>
ruby
class MemosController < ApplicationController def index @memos = Memo.all.order(id: "DESC") end def new @memo = Memo.new end def create @memo = Memo.create(memo_params) if @memo.valid? @memo.save redirect_to root_path else render :new end end def checked memo = Memo.find(memo_params[:id]) if memo.checked then memo.update(checked: false) else memo.update(checked: true) end item = Memo.find(memo_params[:id]) render json: { memo: item } end private def memo_params params.require(:memo).permit(:item, :text) end end
補足情報(FW/ツールのバージョンなど)
ruby '2.6.5'
gem 'rails', '~> 6.0.0'
gem 'mysql2', '0.5.3'


まだ回答がついていません
会員登録して回答してみよう