プロが教えるわが家の防犯対策術！

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

解決済

  • 質問者：Cronus2
  • 質問日時：
  • 回答数：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"><!--
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>

通報する

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

質問の本文を隠す

A 回答 (4件)

No.3ベストアンサー

  • 回答者： steel_gray
  • 回答日時：

サンプル。



<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2008/04/03 18:37

No.4

  • 回答者： auty
  • 回答日時：

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



・　関数内で定義された変数は、有効範囲はその関数内のみです。今回
　　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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2008/04/03 18:41

No.2

//間違えた


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

No.1

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

<!--
教えてgooの仕様で,拡張子をxmlにして読み込ませたときエラーが出ることがある。その時は『適宜編集した後』,拡張子をhtmlとして用いるなどすること。どのように編集するかは面倒なので省略
-->
    • good
    • 0
    • 件
通報する
この回答へのお礼

なるほど、こうすれば良かったんですね。
教えてもらえればなんでもない事ですが、
これが分からなくて困ってたので助かりました。
ありがとうございました。

通報する
お礼日時：2008/04/03 18:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報

教えて!goo ウォッチ

新着一覧

ウォッチ 人気記事ランキング

ランキングをもっとみる