手数料計算【javascript】

window.addEventListener('turbo:load',() =>{
    console.log("OK");
})

turbo:load というイベントは、ページが全て読み込まれた後に発火します。JSファイルの読み込みが正しく出来ていればコンソール上に"OK"という文字列が表示される

document.getElementById("id名")  // これはid名を指定してHTMLの要素を取得するメソッドです

金額を次は金額を入力するたびに、イベント発火するようにaddEventListenerを使用

    const inputValue = priceInput.value;

value属性を指定し、input要素から実際に入力した金額の値を取得。つまりフリマの出品値段から今回指定したい10％の値段を取得

これが終わると次はいよいよ手数料の実装。
innerHTMLを使用して、販売手数料や利益計算結果を表示できるようにしましょう。

innerHTMLは、HTML要素の書き換えを行うことができます。

 const addTaxDom = document.getElementById("販売手数料を表示する場所のid");
    addTaxDom.innerHTML = "入力した金額をもとに販売手数料を計算する処理"

実際には

    const addTaxDom = document.getElementById("add-tax-price");
    addTaxDom.innerHTML = Math.floor(inputValue * 0.1);

と書いてみたところ、よしよしいけてる

次に出品料-手数料

const profitDom = document.getElementById("profit");
profitDom.innerHTML = Math.floor(inputValue-addTaxDom);

これではエラーが出てしまったため考えてみる
2つ上のconst addTaxDomが変数であるためそのままその変数を使ったがそれがだめだった模様。
正解は下記の通り

const profitDom = document.getElementById("profit");
profitDom.innerHTML = Math.floor(inputValue-Math.floor(priceInput.value*0.1));

となると正確に表示されました。

しかしまたもや問題が発生。
出品時、不備があった際に出るエラーリングが起こった場合手数料と合計の値段が動きません。

悩んでも解決しなかった場合再度書き直します