jQueryからJavascriptへの変換方法

Question

// 販売価格が入力されたら、販売手数料と販売利益を計算してくれます
$(function(){
 $( document ).on( 'keyup', 'ここに販売価格入力欄のclassもしくはid名', function(){ 
   // 販売価格の入力欄に入力すると動きます
   let amount = $( this ).val();
   // 販売価格の入力欄に入力された値を変数「amount」に代入
   let tax = Math.ceil(amount * 0.1);
   // 販売手数料は10%としています。またMath.ceilメソッドで1円単位に切り上げています。
   // 計算結果を変数「tax」に代入
   let profit = Math.floor(amount * 0.9);
   // 利益は残りの金額。Math.floorメソッドで、1円単位で切り捨てておけば「販売価格 = 販売手数料 + 販売利益」が成り立ちます。
   // 計算結果は変数「profit」に代入。
   $('ここに販売手数料の欄のclassもしくはid名').html(tax);
   // htmlメソッドを使って販売手数料の欄を丸ごと書き換えます。
   $('ここに販売利益の欄のclassもしくはid名').html(profit);
   // 同じように販売利益の欄も書き換えます。
 });
});

上記のjQueryコードをJavascriptに変えたいのですが、どうすればいいか教えていただけませんでしょうか？javascriptにあまり慣れておらず、苦戦しております。
フリマアプリを作成しており、販売手数料などを自動で計算してくれる機能を実装しております。

よろしくお願いします。

Comments

[maisumakun]

> 上記のjQueryコードをJavascriptに変えたいのですが

どのような状況でその必要が生じたのでしょうか？

Answer 1

わからないならjQueryでやれば良いと思いますが・・・

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.addEventListener('keyup',(e)=>{
    if(e.target==document.querySelector('#hanbaikakaku')){
      let amount = e.target.value;
      let tax = Math.ceil(amount * 0.1);
      let profit = Math.floor(amount * 0.9);
      document.querySelector('#tax').textContent=tax;
      document.querySelector('#profit').textContent=profit;
    }
  });
});
</script>

販売価格：<input type="text" id="hanbaikakaku"><br>
販売手数料、税金：<span id="tax"></span><br>
販売利益：<span id="profit"></span>