0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

#概要
①inputタブのid属性に入力した値をインプット
②JS側で計算(加工)今回は消費税の計算になります。
③テーブルタグに出力。

#①HTML インプット

index.html
<form>
    <label>式:</label>
    <input  type="tel" placeholder="価格を入力してください" id="number">
    <input class="btn" type="button" value="計算"id="count">
  </form>

テキスト、ボタンそれぞれにid属性を付けます。

#②JS 加工、アウトプット

index.js
const reckoning = document.querySelector('[type="button"]');
      reckoning.addEventListener('click',e =>{
        function totalTax() {
          const taxNot = document.getElementById('number').value;
          console.log(taxNot);
          const total = Math.round(taxNot * (1+0.1)); 
          return total; 
        }
        const sub = totalTax();
       
        document.getElementById('total').textContent = sub;
        

      });

①ボタンを押す(イベント)発生
②テキストから値を取得(valueプロパティ ▶ フォームのインプットやtextareaの値や文字列を取得し、要素の中身を操作します。)
③Math.roundで小数点以下を四捨五入します。
④定数subに関数を呼び出す。
⑤テキストのid取得し、subを代入。
⑥テーブルに出力

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?