

ruby,ruby on rails, JavaScript初学者です。  
飲食店の予約サイトを作成中です。

rails6.0.0において、jqueryを使用し、添付写真のコースプルダウンを選ぶと、一人当たりのお支払いを出力し、人数と入力したら、一人当たりのお支払い×人数の値を出力したいです。

[![作成ページ　＆　HTML](https://i.stack.imgur.com/deaNc.png)](https://i.stack.imgur.com/deaNc.png)

以下コードにて一人当たりのお支払いを出力したいのですが、エラーが発生してしまいます。  
※現状コードでは、一人当たりのお支払いを出力する希望の記述を行なっております。

views/reservations/new.html.erb

[code]

    <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 %> 
    
[/code]

javascript/menu.js

[code]

    $('#menu_select').on('change', () => {
      const price = $('#menu_select > option:selected').data('price');
      $('#total_price').text(price);
    })
    
[/code]

### 試したこと

・`<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  
不足情報等がございましたら、ご質問いただけると幸いです。  
どうぞ宜しくお願い致します。


CC BY-SA 4.0
2021-08-22T06:53:44.883
80965
2021-08-22T12:00:23.110
2021-08-22T12:00:23.110
47748
47748
question
javascript ruby-on-rails ruby jquery
Rails での jqueryを使用し、HTMLから値を取り出す方法について