- ベストアンサー
クリックの度に加算していくには?
タイトルのような場合について教えてください。 数値ABCにそれぞれ数値を入れて合計を出すのですが、 1度の入力で完結するのでなく「計算」をクリックする度に 入力された数値が合計に加算させていきたいです。 できれば、一度クリックされたら数値入力内容をリセットさせたいと思っています。 (下記はサンプルで実際には複数の合計項目に数値ABCがそれぞれ計算されたものが入ります。) 例) 数値A 10 数値B 5 数値C 0 に入力されてクリックされたら、合計は15。 再度入力されて(出来ればここで数値ABCをリセットして0に) 数値A 10 数値B 5 数値C 0 なら、合計30。 という感じです。 初歩的な質問だと思いますが、かなりの初心者で どうしていいのか分からず悩んでいます。 どうぞよろしくお願いします。 <html> <head> <script language="JavaScript"><!-- function calc() { var a = parseFloat(0); a += parseFloat(document.getElementById('myform').calcText1.value); a += parseFloat(document.getElementById('myform').calcText2.value); a += parseFloat(document.getElementById('myform').calcText3.value); document.getElementById('myform').calcText.value = a; } // --></script> </head> <body> <form id="myform">数値A<INPUT type="text" name="calcText1" value="0"><BR> 数値B<INPUT type="text" name="calcText2" value="0"><BR> 数値C<INPUT type="text" name="calcText3" value="0"><BR> <BR> <br> <input type="button" value="計算" onClick="calc()"><input type="reset" value="リセット" > <br><br> 合計<INPUT type="text" name="calcText" value="0"> <br><br> </form> </body> </html>
- Cronus2
- お礼率46% (28/60)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
サンプル。 <html> <head> <script type="text/javaScript"> function calc(F){ //合算(合計欄の値も使う) var a = parseFloat(F.elements['calcText'].value) + parseFloat(F.elements['calcText1'].value) + parseFloat(F.elements['calcText2'].value) + parseFloat(F.elements['calcText3'].value); F.reset();//フォームをリセット F.elements['calcText'].value = a;//結果の設定 return false; } </script> </head> <body> <form onsubmit="return calc(this)"> 数値A<input type="text" name="calcText1" value="0"><br> 数値B<input type="text" name="calcText2" value="0"><br> 数値C<input type="text" name="calcText3" value="0"><br> <br> <input type="submit" value="計算"> <input type="reset" value="リセット" > <br><br> 合計<input type="text" name="calcText" value="0" readonly> <br><br> </form> </body> </html>
その他の回答 (3)
- auty
- ベストアンサー率58% (284/486)
元のソースコードを活かすとすると、グローバル変数の使い方を覚えるだけです。 ・ 関数内で定義された変数は、有効範囲はその関数内のみです。今回 var a = parseFloat(0); で定義された変数aは、関数calc()が終わると消えてしまいます。 ・ 変数を明示的にグローバル変数にするには、関数の外で、varを使って定義するのが良い方法です。グローバル変数は、ページが表示され続ける限り有効です。 var a = parseFloat(0); を calc()の外に移動するだけでOKです。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <script language="JavaScript"><!-- var a = parseFloat(0); function calc() { a += parseFloat(document.getElementById('myform').calcText1.value); a += parseFloat(document.getElementById('myform').calcText2.value); a += parseFloat(document.getElementById('myform').calcText3.value); document.getElementById('myform').calcText.value = a; } // --></script>
お礼
仰るとおりグローバル変数とローカル変数の使い分けが...；； ただ、外にやるだけでも良かったんですね^ ^; 勉強になりました。 ありがとうございました。
- himajin100000
- ベストアンサー率54% (1660/3060)
//間違えた //合計もリセットする気なら //a = 0; //じゃん
- himajin100000
- ベストアンサー率54% (1660/3060)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <script type="text/javascript"> //<![CDATA[ var a = 0; function reset(){ document.getElementById('calcText1').value = '0'; document.getElementById('calcText2').value = '0'; document.getElementById('calcText3').value = '0'; //合計もリセットする気なら //document.getElementById('calcText').value = '0'; } function calc() { a += parseFloat(document.getElementById('calcText1').value); a += parseFloat(document.getElementById('calcText2').value); a += parseFloat(document.getElementById('calcText3').value); document.getElementById('calcText').value = a.toString(); } //]]> </script> <title>Q3917729 TestCase1</title> </head> <body> <h1>Q3917729 TestCase1</h1> <h2>入力項目</h2> <dl> <dt>数値A</dt> <dd><input type="text" id="calcText1" value="0" /></dd> <dt>数値B</dt> <dd><input type="text" id="calcText2" value="0" /></dd> <dt>数値C</dt> <dd><input type="text" id="calcText3" value="0" /></dd> </dl> <h2>処理</h2> <ul> <li><input type="button" value="計算" onclick="calc();" /></li> <li><input type="button" value="リセット" onclick="reset();"/></li> </ul> <h2>結果</h2> <dl> <dt>合計</dt> <dd><input type="text" id="calcText" value="0" /></dd> </dl> </body> </html> <!-- 教えてgooの仕様で,拡張子をxmlにして読み込ませたときエラーが出ることがある。その時は『適宜編集した後』,拡張子をhtmlとして用いるなどすること。どのように編集するかは面倒なので省略 -->
お礼
なるほど、こうすれば良かったんですね。 教えてもらえればなんでもない事ですが、 これが分からなくて困ってたので助かりました。 ありがとうございました。
お礼
これです、イメージ通りのサンプルです。 これなら自動で入力後にリセットされて良いです。 勉強になりました。 ありがとうございました。