#概要
①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を代入。
⑥テーブルに出力