消費税計算②

クリックしてから、アラートとして表示するまでのプログラムです。

index.html

<form>
    <label>式:</label>
    <input  type="tel" placeholder="2000" >
    <input class="btn" type="button" value="計算" id="count">
  </form>

今回はHTMLのformから入力して、計算ボタンを押したときに値をアラートで返せるように実装していきます。

index.js

 // クリックイベントで消費税関数処理終了からのアラートで計算結果表示
    const reckoning = document.querySelector('[type="button"]');

    reckoning.addEventListener('click',e =>{
      const tax = 0.1;
      function totalTax(taxNot) {
        const total = taxNot + taxNot * tax;
        return total;
      }


      const sub = totalTax(3000);

      window.alert(sub);

    })

①定数 reckoning(計算)にquerySelectorボタンを代入します。
②先程代入した、reckoningにイベントを設定します。
③消費税の関数
④定数subに関数totalTaxを呼び出し、３０００を代入します。
⑤それをwindow.alertで呼び出します。

関数スコープ

今回、クリックイベントの中で使われている税込み計算の関数は、クリックイベントの中でのみ有効となります。
クリックイベントの外で呼び出してもエラーになります。

次回

ユーザーが税別の金額を入力したら税込み計算を返せるようにプログラムを組む。