ojfubd / storyshare

0 stars 0 forks source link

フォームでボタンを押したら自動的に文字が入力されるようになりたい #37

Closed ojfubd closed 2 months ago

ojfubd commented 2 months ago

使用しているパソコンの種類 Mac

質問内容・実現したいこと javascriptで自分で作ったjsファイルをerbファイルで起動させたい フォームでボタンを押したら自動的に文字が入力されるようになりたい

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

該当のソースコード

class StoriesController < ApplicationController

def new @story = Story.new @page = params[:page].to_i
@randNumber = rand(1..3) end

def create success = false @page = 0 @randNumber = rand(1..3)

トランザクションを開始する

ActiveRecord::Base.transaction do begin

データベースに一時保存する処理

@story = Story.new(story_params.merge(user_id: current_user.id)) if @story.save

保存したストーリーデータを取得し、マージする

@story.assign_attributes(story_params) @page =+ 1 success = true else flash[:error] = @story.errors.full_messages.join(", ") raise ActiveRecord::Rollback end rescue => e flash[:error] = @story.errors.full_messages.join(", ")

ロールバックを明示的に行う

raise ActiveRecord::Rollback end end if success render :new else render :new end end

def edit @story = Story.find(params[:id])
@page = 0 @randNumber = rand(1..3) render :new

end

def update @story = Story.find(params[:id])
@randNumber = rand(1..3) @story.user = current_user # ここでUserを設定する @page = params[:page].to_i
success2 = false

トランザクションを開始する

ActiveRecord::Base.transaction do begin if @story.update(story_params) if @page < 3 @page += 1 success2 = true else redirect_to stories_path, notice: 'Story was successfully updated.' return # 処理を中断するために return する end else flash[:error] = @story.errors.full_messages.join(", ") raise ActiveRecord::Rollback end rescue => e flash[:error] = @story.errors.full_messages.join(", ")

ロールバックを明示的に行う

raise ActiveRecord::Rollback end end if success2 render :new else render :new end end 以下省略

new.html.erb <% if @story.errors.any? %> <%= render 'shared/error_message', object: @story %> <% end %> <%= form_with model: @story, data: { turbo: false }, url: @story.new_record? ? stories_path(page: @page) : story_path(@story, page: @page), local: true do |form| %>

<% case @page %> <% when 0 %> <%= render 'story', f: form %> <% when 1 %> <%= render 'plan', f: form %> <% when 2 %> <%= render 'view_world', f: form %> <% when 3 %> <%= render 'text', f: form %> <% end %>
<% if @page < 3 %> <%= form.submit "Next" %> <% else %> <%= form.submit "登録" %> <% end %>

<% end %>

_plan.html.erb <%= f.label :theme, class: "form-label", for:'password' %> <%= f.text_area :theme, id:'password', class: "form-control", rows: 9, data: { rand_number: @randNumber}%> <%= button_tag 'テーマ自動入力', id: 'auto-fill-link1', type: "button" %>

custom/randoma.js console.log('randoma.js is loaded'); document.addEventListener('DOMContentLoaded', function() { document.getElementById('auto-fill-link1').addEventListener('click', function() { const ddd = { 1: "アメリカ", 2: "値2", 3: "値3" }; const randNumber = document.getElementById('password').dataset.randnumber; document.getElementById('password').value = ddd[randNumber];
}); });

application.js // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails import "@hotwired/turbo-rails" import "controllers" import * as bootstrap from "bootstrap" import './custom/randoma'

エラーから考えられる原因 読み込まれていないのが原因 試したこと https://arc.net/l/quote/pehofnnz

参考にしたURL・使用したプロンプト

controllersのフォルダーにrandoma.jsを入れたら読み込まれるとかないの?

ロボらんてくん controllersフォルダーにrandoma.jsを入れると読み込まれるかどうかについて回答するダナ。

基本的に、import "controllers"はapp/javascript/controllersフォルダー内のファイルを読み込むためのものダゾ。randoma.jsをそのフォルダーに入れてもimport "controllers"だけでは読み込まれないダナ。

もしどうしてもcontrollersフォルダーに入れたい場合は、明示的にrandoma.jsをインポートする必要があるダゾ。

例えば、app/javascript/controllersフォルダーにrandoma.jsを置いた場合、以下のようにするダナ:

import "@hotwired/turbo-rails" import "controllers" import * as bootstrap from "bootstrap" import "./controllers/randoma" こうすれば、randoma.jsが正しく読み込まれるハズダナ。

ただし、一般的にはファイルの整理を考えると、randoma.jsはapp/javascript直下や適切なサブフォルダーに配置する方が良いカモしれないダナ。

The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly. To fix this issue, make sure the label's for attribute references the correct id of a form field. これは何を表しているの

ロボらんてくん このメッセージは、HTMLフォーム内の

具体的には、

例:

修正前の例では、
kenchasonakai commented 2 months ago

ありがとうございます ご自身が作成されているアプリかと思いますので、どうやれば出来るかをある程度確証が持てるまで記事を探したりして理解をしてからご自身のアプリだとどのようにすればよいかの方針を立てて検証を繰り返せるようにするとよいかと思います。

実際に働き始めたときに整理されていない質問はわからないことを丸投げされているように感じられてしまう可能性がありますので、まずは下記の項目をおおよそ満たせるように整理してみてください

  1. 実現したいこと
  2. 実現するために自分が選んだ手段とその理由
  3. その手段を使って実装するために参考にした公式ドキュメントや技術記事
  4. 参考にしたものと自分の実装で違う箇所・もしくは違う箇所はなくまったく同じ実装方法をしている(どういう実装をすれば実現できるのかを理解しているのかどうか)
  5. エラーが出ているのかエラーが出ていないのか、エラーが出ているのであればどんなエラーが出ているのか
  6. そのエラーの内容から推測したエラーの原因
  7. エラーの原因を解決するために自分で調べた記事
  8. 調べた記事を元に自分で行った対処法とその結果
  9. 対処を行った際にわかったことや推測できたこと