ruby,ruby on rails, JavaScript初学者です。
飲食店の予約サイトを作成中です。
rails6.0.0において、jqueryを使用し、添付写真のコースプルダウンを選ぶと、一人当たりのお支払いを出力し、人数と入力したら、一人当たりのお支払い×人数の値を出力したいです。
以下コードにて一人当たりのお支払いを出力したいのですが、エラーが発生してしまいます。
※現状コードでは、一人当たりのお支払いを出力する希望の記述を行なっております。
views/reservations/new.html.erb
<h1><%= link_to '予約フォーム', root_path, class:'reservation-form'%></h1>
<%= form_with model: @reservation, url: new_reservation_path, method: :get, class: 'reservation', local: true do |f| %>
<div class="reservation-price">
<h2>コース選択</h2>
<div calss="reservation-date">
<%= f.label :日付を選択, class: 'label'%><br />
<%= f.date_field :date, class: 'date' %>
</div>
<div class="reservation-time">
<%= f.label :時間を選択, class: 'label' %><br />
<%= f.time_field :time, class: 'time'%>
</div>
<div class="reservation-people">
<%= f.label :人数%><br />
<%= f.number_field :people, class: 'people'%>人
</div>
<%# 出力希望箇所 %>
<div class="menu">
コース<br />
<%= f.select :menu_id, (Menu.all.map {|m| [m.name, m.id, {'data-price' => m.price }]}), {}, {id: 'menu_select'} %>
</div>
<div class="person-price">
<script src="code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<span>1人当たりのお支払い</span><br />
<span>
<span id="person_price"></span>円
</span>
</div>
<div class="total-price">
<span>合計金額</span><br />
<span>
<span ></span>円
</span>
</div>
<%# 出力希望箇所 %>
<div class="reservation-remark">
<%= f.label :その他%><br />
<%= f.text_area :remark, placeholder:"嫌いな食べ物など",class: 'remark'%>
</div>
<div>
<%= f.submit "予約する"%> <br />
</div>
<div class="reservation-btn">
<%= link_to '戻る', root_path, class:'reservation-form'%>
</div>
<% end %>
javascript/menu.js
$('#menu_select').on('change', () => {
const price = $('#menu_select > option:selected').data('price');
$('#total_price').text(price);
})
試したこと
・<script src="code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
を現状コードの通り記載
エラーメッセージ
Uncaught ReferenceError: $ is not defined
at Object../app/javascript/menu.js (menu.js:1)
at webpack_require (bootstrap:19)
at Object../app/javascript/packs/application.js (application.js:10)
at webpack_require (bootstrap:19)
at bootstrap:83
at bootstrap:83
・上記コードを削除し、gem で jquery-railsをインストール
エラーメッセージ
Uncaught ReferenceError: $ is not defined
at Object../app/javascript/menu.js (menu.js:1)
at webpack_require (bootstrap:19)
at Object../app/javascript/packs/application.js (application.js:10)
at webpack_require (bootstrap:19)
at bootstrap:83
at bootstrap:83
不足情報等がございましたら、ご質問いただけると幸いです。
どうぞ宜しくお願い致します。