Q&A
総合計の数量と数値はどうやって計算するのか説明してください (「合ってしまいました」ということは、合わない場合があるような計算方法だということですよね)。
ちなみに、このコメント欄に書くのではありません。質問文を編集して書いてください。
こちらのサイト様を参考にほぼコピペで自動計算表を作成していますが、計算表自体は問題なく動いています。
表示は小数点第三位で四捨五入した数値にしたいのですが、
計算する時には小数点以下全ての数値で計算したいです。
以下のコードは参考サイト様のものから少し変更したものになっていますが、知識不足で動いてはいますが間違っているかもしれません。
php
1<body onload="reCalc();"> 2<table> 3 <thead> 4 <tr><th>商品名</th><th>単価</th><th>単価2</th><th>数量</th><th>合計</th></tr> 5 </thead> 6 <tbody> 7 <tr> 8 <th>リンゴ</th> 9 <td><input type="number" id="tanka_001" name="tanka_001" readonly value="123">円</td> 10 <td><input type="number" id="tanka2_001" name="tanka_001" readonly value="<?php $sample = 123 / 1000;echo number_format($sample,2) ?>">円</td> 11 <td><input type="number" id="suryo_001" name="suryo_001" value="30" onchange="reCalc();">個</td> 12 <td><input type="number" id="yokokei_001" name="yokokei_001" readonly value="0" onchange="reCalc();">円</td> 13 </tr> 14 <tr> 15 <th>バナナ</th> 16 <td><input type="number" id="tanka_002" name="tanka_002" readonly value="456">円</td> 17 <td><input type="number" id="tanka2_002" name="tanka_002" readonly value="<?php $sample2 = 456 / 1000;echo number_format($sample2,2) ?>">円</td> 18 <td><input type="number" id="suryo_002" name="suryo_002" value="20" onchange="reCalc();">個</td> 19 <td><input type="number" id="yokokei_002" name="yokokei_002" readonly value="0" onchange="reCalc();">円</td> 20 </tr> 21 <tr> 22 <th>パイナップル</th> 23 <td><input type="number" id="tanka_003" name="tanka_003" readonly value="789">円</td> 24 <td><input type="number" id="tanka2_003" name="tanka_003" readonly value="<?php $sample3 = 789 / 1000;echo number_format($sample3,2) ?>">円</td> 25 <td><input type="number" id="suryo_003" name="suryo_003" value="10" onchange="reCalc();">個</td> 26 <td><input type="number" id="yokokei_003" name="yokokei_003" readonly value="0" onchange="reCalc();">円</td> 27 </tr> 28 </tbody> 29 <tfoot> 30 <tr> 31 <th colspan="3">総合計</th> 32 <td><input type="number" id="total2" name="total2" readonly value="0">個</td> 33 <td><input type="number" id="total" name="total" readonly value="0">円</td> 34 </tr> 35 </tfoot> 36</table> 37</body>
javascript
1function gyo(obj){return obj.parentElement.parentElement;} 2function tanka(obj){return gyo(obj).querySelectorAll("input[id^=tanka]")[0].value;} 3function tanka2(obj){return gyo(obj).querySelectorAll("input[id^=tanka2]")[0].value;} 4function suryo(obj){return gyo(obj).querySelectorAll("input[id^=suryo]")[0].value;} 5function yokokei(obj){ 6 result = Number(tanka2(obj)) * Number(suryo(obj)); 7 gyo(obj).querySelectorAll("input[id^=yokokei]")[0].value = result.toFixed(2); 8 return result; 9} 10function tatekei(){ 11 prices = Array.from(document.querySelectorAll("input[id^=yokokei]")).map(element => Number(yokokei(element))) ; 12 result = prices.reduce(function(sum,element){ 13 return sum + element ; 14 }); 15 return result; 16} 17function tatekei2(){ 18 prices2 = Array.from(document.querySelectorAll("input[id^=suryo]")).map(element => Number(suryo(element))) ; 19 result = prices2.reduce(function(sum,element){ 20 return sum + element ; 21 }); 22 return result; 23} 24function reCalc(){ 25 document.getElementById("total").value = tatekei().toFixed(2); 26 document.getElementById("total2").value = tatekei2().toFixed(2); 27 return; 28}
上記のコードで現状このように表示されています。
商品名と単価の部分はデータベースから引っ張ってきています。
| 商品名 | 単価 | 単価2 | 数量 | 合計 |
|---|---|---|---|---|
| リンゴ | 123円 | 0.12円 | 30個 | 3.60円 |
| バナナ | 456円 | 0.46円 | 20個 | 9.20円 |
| パイナップル | 789円 | 0.79円 | 10個 | 7.90円 |
| 総合計 | 60.00個 | 20.70円 |
実際は個数でも金額でもないのですがこうしたいです↓
(総合計はこれだと合ってしまいましたが...)
| 商品名 | 単価 | 単価2 | 数量 | 合計 |
|---|---|---|---|---|
| リンゴ | 123円 | 表示は0.12で計算する時は0.123にしたい | 30個 | 3.69円(0.123×30) |
| バナナ | 456円 | 表示は0.46で計算する時は0.456にしたい | 20個 | 9.12円(0.456×20) |
| パイナップル | 789円 | 表示は0.79で計算する時は0.789にしたい | 10個 | 7.89円(0.789×10) |
| 総合計 | 60.00個 | 20.70円 |
表示は小数点第三位で四捨五入した数値、計算時は小数点以下全ての数値を使用するにはどうしたら良いのでしょうか？
ヒントでも構いませんのでよろしくお願いいたします。
現状PHPとの関連性はなさそうに見えるので、タグを外すか関連性が分かる説明を追記してください。
@so68_so78 さん
「質問へのコメント」と「回答」がついていますので、それぞれ返信してください。
回答3件
0
単純に単価２を計算で使わずに単価1を1000で割ったもので処理すればよいのでは？
それとreadonlyならわざわざinputを使わなくてもよいでしょう。
（あたかも入力できるように見えるのでユーザービリティが落ちます）
javascript
1<script> 2const formatNumber=(num,digit=0)=>num.toFixed(digit).toLocaleString(undefined,{minimumFactionDigits:digit,maximumFractionDigits:digit}); 3const recalc=()=>{ 4 document.querySelectorAll('#t1 tbody :nth-child(4 of td) span').forEach(x=>{ 5 const v1=Number(x.closest('tr').querySelector(':nth-child(1 of td) span').textContent/1000); 6 const v2=Number(x.closest('tr').querySelector(':nth-child(3 of td) input').value); 7 x.textContent=formatNumber(v1*v2,2); 8 }); 9 const sum_suryo=[...document.querySelectorAll('#t1 tbody :nth-child(3 of td) input')].reduce((x,y)=>x+Number(y.value),0); 10 const sum_kingaku=[...document.querySelectorAll('#t1 tbody :nth-child(4 of td) span')].reduce((x,y)=>x+Number(y.textContent),0); 11 document.querySelector('#t1 tfoot :nth-child(1 of td) span').textContent=sum_suryo; 12 document.querySelector('#t1 tfoot :nth-child(2 of td) span').textContent=formatNumber(sum_kingaku,2); 13}; 14window.addEventListener('DOMContentLoaded', ()=>{ 15 document.querySelectorAll('#t1 tbody :nth-child(2 of td) span').forEach(x=>{ 16 const v1=Number(x.closest('tr').querySelector(':nth-child(1 of td) span').textContent/1000); 17 x.textContent=formatNumber(v1,2); 18 }); 19 recalc(); 20}); 21document.addEventListener('input', ()=>{ 22 recalc(); 23}); 24</script> 25<style> 26#t1 tbody :nth-child(3 of td), 27#t1 tbody :nth-child(4 of td), 28#t1 tfoot :nth-child(1 of td), 29#t1 tfoot :nth-child(2 of td) 30{text-align:right;} 31</style> 32<table id="t1"> 33<thead> 34<tr><th>商品名</th><th>単価</th><th>単価2</th><th>数量</th><th>合計</th></tr> 35</thead> 36<tbody> 37<tr> 38<th>リンゴ</th> 39<td><span>123</span>円</td> 40<td><span></span>円</td> 41<td><input type="number" name="suryo" value="30">個</td> 42<td><span></span>円</td> 43</tr> 44<tr> 45<th>バナナ</th> 46<td><span>456</span>円</td> 47<td><span></span>円</td> 48<td><input type="number" name="suryo" value="20">個</td> 49<td><span></span>円</td> 50</tr> 51<tr> 52<th>パイナップル</th> 53<td><span>789</span>円</td> 54<td><span></span>円</td> 55<td><input type="number" name="suryo" value="10">個</td> 56<td><span></span>円</td> 57</tr> 58</tbody> 59<tfoot> 60<tr> 61<th colspan="3">総合計</th> 62<td><span></span>個</td> 63<td><span></span>円</td> 64</tr> 65</tfoot> 66</table>
投稿2024/04/15 02:22
編集2024/04/15 05:27
総合スコア114845
0
どちらも "単価" を元に計算してみてください。
表示は小数点第三位で四捨五入した数値、
"単価" を10で除算した後に、四捨五入して、100で除算してください。
javascript
1Math.round(456/10)/100; // 0.46
計算時は小数点以下全ての数値を使用するにはどうしたら良いのでしょうか？
"単価" と "数量" で積算した後に、1000で除算してください。
javascript
1123*30/1000; // 3.69
投稿2024/04/13 20:26
総合スコア18166
0
好ましい手法かは分かりませんが、例えば計算用のデータを保持する属性を設定してみてはいかがですか？
Element#setAttributeでvalue2のような属性を追加し、そこに四捨五入していない元の値を入れておくイメージです。
合計の計算時にはvalue属性ではなくvalue2属性を参照して計算すれば、合計は正しい結果になるかと思います。
投稿2024/04/13 15:46
総合スコア532
あなたの回答
tips
プレビュー
