JavaScriptでの税込計算がうまくいかない

JavaScriptで税込計算方法を勉強しています。

下記HTMLを書き、税込み計算をしたいのですが、
例として上から１００円、１０％と入力すると、
計算結果に110.00000000000001と出力されます。
他の数字を入力しても同じようなことになります。

コードのどこが間違っているのか自分で見直してもわかりませんでした。
どこがおかしいのかご指摘頂きたいです。よろしくお願いします。

<body>
<h1>簡単計算機</h1>
<hr>
<h2>収支計算</h2>
<form name="form1">
<h2>消費税計算</h2>
<p>本体金額&nbsp;<input type="text" value="0" class="right" name="text1">円</p>
<p>消費税率&nbsp;<input type="text" value="0" class="right" name="text2">%</p>
<p>税込金額&nbsp;<input type="text" value="0" class="right" name="text3" onfocus="document.form1.text3.value=document.form1.text1.value*(1+document.form1.text2.value*0.01);">円</p>
</form>
</body>

BeatStar

2021/10/25 08:58

それで何がわからないのでしょうか。

tkturbo

2021/10/25 09:03 編集

？？？税込金額欄にフォーカスしたら自動計算してません？？？

BeatStar

2021/10/25 09:21

横着せずに、普通の関数を作ってそれを呼び出した方が分かりやすいかも。 (読めなくはないが、説明がしづらい…)

行動規範の内容に同意します

回答1件

ベストアンサー

計算論理が間違っているわけではなく、コンピュータが内部で2進数を扱っている為に発生する問題です。
なので、こういう問題が発生することを織り込んだコードを書く必要があります。
（なるべく小数同士の計算は避けるようにします。）

html
1<body>
2  <h1>簡単計算機</h1>
3  <hr>
4  <h2>収支計算</h2>
5  <form name="form1">
6    <h2>消費税計算</h2>
7    <p>本体金額&nbsp;<input type="text" value="0" class="right" name="text1">円</p>
8    <p>消費税率&nbsp;<input type="text" value="0" class="right" name="text2">%</p>
9    <p>税込金額&nbsp;<input type="text" value="0" class="right" name="text3">円</p>
10  </form>
11  
12  <script>
13  const text1Field = document.querySelector("input[name=text1]");
14  const text2Field = document.querySelector("input[name=text2]");
15  const text3Field = document.querySelector("input[name=text3]");
16  
17  text3Field.addEventListener("focus", (event) => {
18    const amount = Number.parseInt(text1Field.value);
19    const tax = Number.parseInt(text2Field.value);
20    const result = Math.round(((amount * 100) + (amount * tax)) / 100);
21    
22    text3Field.value = result;
23  });
24  </script>
25</body>