詳しい人求む！

JavaScriptで小数点も含めた複雑な計算は出来ますか？

締切済

質問者：pippi2020
質問日時：2020/06/29 16:02
回答数：4件

いろいろなコードを組み合わせているのですが、どうしてもうまくいきません。

お力を貸していただければ幸いです。

例えば以下のような感じです。

A・ラジオボタン（小数点第一位まであり）
B・ラジオボタン（小数点第一位まであり）
C・ラジオボタン
D・数字入力

E・数字入力

F・ラジオボタン
G・数字入力
H・プルダウン

（ A + B + C + D ）× E + G + H =　合計

*小数点第二位以下は切り捨て
*選択時や入力時にリアルタイムで合計表示

どうぞよろしくおねがいします。

小数点以下は切り捨ての計算でお願いします。

補足日時：2020/06/29 16:32
通報する

通報する

この質問は特に20代・女性の方に
リクエストされています！
(回答を制限するものではありません。)

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

参考程度に

No.4

回答者： fujillin
回答日時：2020/06/30 16:46

こんにちは

誤差の扱いに関して何もコメントがないようですし、特にラジオボタンをどうしたいのかも不明（HTMLの提示も無いので）なので、かなり適当ですが雰囲気としてのご参考までに。
あとは、適宜修正してみてください。

※ 質問文の本文では「小数点第二位以下は切り捨て」、補足では「小数点以下は切り捨て」となっていて、どちらが正なのか不明ですが、ひとまず、少数１位までを有効桁として切捨て計算としています。
※ テキスト入力はtype="number"とすることで、入力値のチェックは省略しています。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
label{ display: block; }
</style>
</head>

<body>
<form>
<label>A：<input type="radio" name="R1" value="1.1" checked /></label>
<label>B：<input type="radio" name="R1" value="1.2" /></label>
<label>C：<input type="radio" name="R1" value="1.5" /></label>
<label>D：<input type="number" name="T1" value="" /></label>
<label>E：<input type="number" name="T2" value="" /></label>
<label>F：<input type="radio" name="R1" value="0" /></label>
<label>G：<input type="number" name="T3" value="" /></label>
<label>H：<select name="S1">
<option value="3.1" selected>3.1</option>
<option value="3.2">3.2</option>
<option value="3.3">3.3</option>
<option value="3.4">3.4</option>
</select></label>
</form>
<p>合計：<span id="result"></span></p>

<script type="text/javascript">
(() => {
let f = document.forms[0], el = f.elements;
let getV = n => (n<3 && !el[n].checked)? 0 : el[n].value * 10 | 0;

f.addEventListener("submit", e => { e.preventDefault(); });
f.addEventListener("change", e => {
let v = (getV(0) + getV(1) + getV(2) + getV(3)) * getV(4) / 10 | 0;
v += getV(6) + getV(7);
document.getElementById("result").innerHTML = (v / 10).toFixed(1);
});
})();
</script>
</body>
</html>