- ベストアンサー
Javascriptで自動計算のエラーが発生した場合の解決方法
- Javascriptを使用してフォームの合計を自動計算する際にエラーが発生しました。特に、新たな列を追加した際に発生したエラーの解決方法がわかりません。
- 現象としては、D列の合計は正しく表示されていますが、C列の合計は文字の並びが表示されるというものです。
- エラーの原因を調べましたが、解決策が見つかりませんでした。Javascriptのコードにエラーがある可能性も考えられます。
- Rafi
- お礼率98% (112/114)
- JavaScript
- 回答数2
- ありがとう数12
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
値が半角数字の場合、本来JavaScriptでは「文字列」と「数値」どちらとしてでも扱えるようになっています。 ですから、通常はそのまま計算しても、ちゃんと計算できる場合がほとんどです。 ところが、計算式の演算子が「＋」だけであった場合、この演算子は文字列の連結にも使用されるため、スクリプトエンジンは「文字列」なのか「数値」なのか判断できず、本来の型である「文字列」として計算（文字連結）してしまうわけです。 この場合、値を「数値」に変換する必要があります。 例1：整数変換「parseInt」や、数値型指定「Number」を使う var f1 = parseInt(document.form1.c1.value); var fi = Number(document.form1.c1.value); 例2：文字連結に使用しない演算子を使用し、数値と思わせる。 var f1 = document.form1.c1.value * 1; var f1 = document.form1.c1.value / 1; var f1 = document.form1.c1.value - 0; f2、f3も同様にします。 あと、フォーム要素から値を取得した後に、同じ値を同じフォーム要素に書き戻しているのは、何か意図があっての事でしょうか？ もし分からず書いているなら、その行は不要です。 var f1 = (document.form1.c1.value); document.form1.c1.value = f1 ; ←ここは不要 それと、「f1 = (document.form1.c1.value)」と（）で囲まれていますが、これも何の意味がありません。 それらを踏まえたうえで書き換えたのが以下です。 ※追加されたC行部分のみ記載します。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ var f1 = Number(document.form1.c1.value); var f2 = Number(document.form1.c2.value); var f3 = Number(document.form1.c3.value); document.form1.ctotal.value = f1 + f2 + f3; ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 最後に、要素をフルネームで記述するのは、最近のWebページではほとんど使用しないので、書き換えてみました。 各セルの値を配列に代入し、セルと配列を対応させて管理する方が、項目増えた時など編集が楽になると思うのですが、今回は省略。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <BODY> <FORM name="form1"> <TABLE width="473" border="1"> <TBODY> <TR> <TD align="center"> </TD> <TD align="center">A</TD> <TD align="center">B</TD> <TD align="center">C</TD> <TD align="center">D</TD> </TR> <TR> <TD>1</TD> <TD><INPUT type="text" id="A1" onchange="keisan()" style="width:50px"></TD> <TD><INPUT type="text" id="B1" onchange="keisan()" style="width:50px"></TD> <TD><INPUT type="text" id="C1" onchange="keisan()" style="width:25px"></TD> <TD><INPUT type="text" id="D1" style="width:100px" value="0"></TD> </TR> <TR> <TD>2</TD> <TD><INPUT type="text" id="A2" onchange="keisan()" style="width:50px"></TD> <TD><INPUT type="text" id="B2" onchange="keisan()" style="width:50px"></TD> <TD><INPUT type="text" id="C2" onchange="keisan()" style="width:25px"></TD> <TD><INPUT type="text" id="D2" style="width:100px" value="0"></TD> </TR> <TR> <TD>3</TD> <TD><INPUT type="text" id="A3" onchange="keisan()" style="width:50px"></TD> <TD><INPUT type="text" id="B3" onchange="keisan()" style="width:50px"></TD> <TD><INPUT type="text" id="C3" onchange="keisan()" style="width:25px"></TD> <TD><INPUT type="text" id="D3" style="width:100px" value="0"></TD> </TR> <TR> <TD colspan="3" align="right">C合計</TD> <TD><INPUT type="text" id="ctotal" style="width:25px" value="0"></TD> <TD>D合計<INPUT type="text" id="total" style="width:100px" value="0"></TD> </TR> </TBODY> </TABLE> </FORM> </BODY> <SCRIPT type="text/javascript"> function keisan(){ // 計算に使用するデータの行数（1～3なので3行） var gyou = 3; // C列合計 var goukei_c = 0; // D列合計 var goukei_d= 0; // 以下計算を行数分繰り返す for(i = 1;i <= gyou;i++){ // 行計算 var keisanti = document.getElementById('A' + i).value * document.getElementById('B' + i).value * document.getElementById('C' + i).value; // 計算した行の値をD行合計に加算 goukei_d += keisanti; // 現在の行のC列の値をC行合計に加算 goukei_c += Number(document.getElementById('C' + i).value); // 計算結果をフォームに出力 document.getElementById('D' + i).value = keisanti; document.getElementById('total').value = goukei_d; document.getElementById('ctotal').value = goukei_c; } } </SCRIPT>
その他の回答 (1)
- pringlez
- ベストアンサー率36% (598/1630)
# var f1 = (document.form1.c1.value); このような形式で取得した値は、型が文字列です。文字列同士の加算をしているので文字列が結合した結果となっているのです。加算をする前に文字列を数値型にする必要があります。 文字列型を数値型に変換する方法はいくつかありますが、例えばこんな感じです。 document.form1.ctotal.value = Number(f1) + parseInt(f2) + (f3 - 0); 3種類混ぜて書きましたが、こんな混ぜ方をすると間違いの元なので、どれかひとつを選んで統一してください。 一方でD列は文字列同士で掛け算をしています。掛け算の記号があった場合、値が数値であると予想されるため暗黙的に数値に変換しているのです。しかし暗黙的な変換に頼らず、明示的に自分で変換をした方が間違いは減ると思います。
お礼
ありがとうございます！ なぜ同じ式に見えるのに反応が違うのか悩んでいました。 Dの方は同じ式でも先に掛け算でその結果の為に既に数字認識と仮定して動くんですね。 暗黙的なものもあると意識してこれから組んで行こうと思います。
お礼
ありがとうございます。大変詳しく教えて頂き、躓いていた所や勘違いしている所や無駄がよくわかりました。 最近の状況等も伺えて参考になりました。 いろいろ勉強してみたいと思います。