入力した値段を非同期的に表示したい

【概要】

1.結論

2.どのように記述するのか

3.ここから学んだこと

1.結論

javascript(jquery)で、inputイベントを使う！

2.どのように記述するのか ----------------------------------------

app/javascript/price.js

$(function(){
  $('#item-price').on('input', function(){
    let tax = $('#item-price').val();
    $('#tax-price').text(Math.ceil(tax * 0.1));
    $('#benefit').text(Math.ceil(tax - (tax * 0.1)));
  });
});

自分が書いたプログラムはこのようになります！

即時関数宣言をしています。
item-price/tax-price/benefit はHTMLの各表示部分の”id名”になります！価格が表示される部分と繋がっています。

inputイベントは値が変更された時に発火するもので、
item-priceに2000円と入力すればtax-price（200円)/benefit(1800円）と表示されるようになっています！

またtext(Math.ceil(tax * 0.1))の部分で、
textは'#tax-price'の中身を取得し、Math.ceilは小数点を切り上げています！

valも'#item-price'の中身を取得しています！

助けていただいたURL：
イベント: change, input, cut, copy, paste

.val()について

3.ここから学んだこと ---------------------------------------- 最初はinputイベントの部分をchaengeイベントで使用していました。そうすると、changeイベントでは、入力したあとでページのどこかしらを一度クリックしないと金額変更が反映されないことに気づきました。なのでinputイベントに変更しました。ただ戻るボタンを押して以前入力した金額を残した状態で金額変更を反映させる部分についてはキャッシュも絡んでくるので、もっと勉強しておきます！