クリックの度に加算していくには?

解決済

質問者：Cronus2
質問日時：2008/04/03 02:37
回答数：4件

タイトルのような場合について教えてください。

数値ABCにそれぞれ数値を入れて合計を出すのですが、
1度の入力で完結するのでなく「計算」をクリックする度に
入力された数値が合計に加算させていきたいです。
できれば、一度クリックされたら数値入力内容をリセットさせたいと思っています。
(下記はサンプルで実際には複数の合計項目に数値ABCがそれぞれ計算されたものが入ります。)
例)
数値A 10
数値B 5
数値C 0
に入力されてクリックされたら、合計は15。
再度入力されて(出来ればここで数値ABCをリセットして0に)
数値A 10
数値B 5
数値C 0
なら、合計30。
という感じです。

初歩的な質問だと思いますが、かなりの初心者で
どうしていいのか分からず悩んでいます。
どうぞよろしくお願いします。

<html>
<head>
<script language="JavaScript"></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>

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： steel_gray
回答日時：2008/04/03 07:41

サンプル。

<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>

- 0
- 件

通報する

この回答へのお礼

これです、イメージ通りのサンプルです。
これなら自動で入力後にリセットされて良いです。
勉強になりました。
ありがとうございました。

通報する

お礼日時：2008/04/03 18:37

No.4

回答者： auty
回答日時：2008/04/03 07:51

元のソースコードを活かすとすると、グローバル変数の使い方を覚えるだけです。

・　関数内で定義された変数は、有効範囲はその関数内のみです。今回
　　var a = parseFloat(0);
　　で定義された変数aは、関数calc()が終わると消えてしまいます。

・　変数を明示的にグローバル変数にするには、関数の外で、varを使って定義するのが良い方法です。グローバル変数は、ページが表示され続ける限り有効です。

var a = parseFloat(0);
を
calc()の外に移動するだけでOKです。

以下のコードを参考にしてみてください。
------------------------------------------------------------
<html>
<head>
<script language="JavaScript"></script>

- 0
- 件

通報する

この回答へのお礼

仰るとおりグローバル変数とローカル変数の使い分けが...；；
ただ、外にやるだけでも良かったんですね^ ^;
勉強になりました。
ありがとうございました。

通報する

お礼日時：2008/04/03 18:41

No.2

回答者： himajin100000
回答日時：2008/04/03 03:23

//間違えた

//合計もリセットする気なら
//a = 0;
//じゃん

- 0
- 件

通報する

No.1

回答者： himajin100000
回答日時：2008/04/03 02:59

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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>