jQueryで電卓を作っているのですが

Question

現在、以下のようなコードで電卓を作成しているのですが。このコードだと足し算だけならできたのですが引き算をすると二週目の計算に不具合が生じてしまいます。例えばどのような不具合かと言うと 30 - 10 = 20 ←この段階では問題はありません。しかし、この答えからさらに次の計算を行うと 20 - 5 = -15 ←このようになぜか負の値になってしまいます。自分なりに何が原因なのかを調べてみたのですが足し算のほうは問題なく表示されるだけになぜどこからとも無く-の記号が現れるのか分からない状況です。ちなみにかけ算も試してみたのですがかけ算の場合は2週目の計算結果が0になってしまいます。この問題はどのように記述すれば解決できるのでしょうか？分かる方お願いします。～～HTML～～

AC

1
2
3
+

4
5
6
-

7
8
9
×

0
.
=
÷

～～jQuery～～ /*数字の入力*/ $(".num").click(function(){ var num = $(this).text(); if(inputZ.text() == "" && num == 0){ inputZ.append(num + "."); } else{ inputZ.append(num); } }); /*リセット*/ $(".reset").click(function(){ inputZ.text(""); divTxt = Div.text(""); }); /*加算*/ $(".addition").click(function(){ if(inputZ.text() == ""){ leftFml_01 = rightFml_01 } else{ leftFml_01 = parseFloat(inputZ.text()); } inputZ.text(""); divTxt_01 = Div.text(leftFml_01 + " +"); Ans.click(function(){ if(inputZ.text() == ""){ rightFml_01 = leftFml_01; } else{ rightFml_01 = parseFloat(inputZ.text()); } reply_01 = leftFml_01 + rightFml_01; inputZ.text(reply_01); leftFml_01 = null; divTxt_01.text(""); }); }); /*減算*/ $(".subtraction").click(function(){ if(inputZ.text() == ""){ leftFml_02 = rightFml_02 } else{ leftFml_02 = parseFloat(inputZ.text()); } rightFml_02 = null; inputZ.text(""); divTxt_02 = Div.text(leftFml_02 + " -"); Ans.click(function(){ if(inputZ.text() == ""){ rightFml_02 = leftFml_02; } else{ rightFml_02 = parseFloat(inputZ.text()); } reply_02 = leftFml_02 - rightFml_02; inputZ.text(reply_02); leftFml_02 = null; divTxt_02.text(""); }); }); });

b0a0a · Accepted Answer

演算が行われる度に
イベントリスナが
Ans.click(function(){
で登録されているからです

新しいイベントリスナを登録しても
古いのが消えたりはしません
どんどん溜まっていき、１回のクリックでいくつも呼ばれることになります

その結果

１番目に呼ばれたイベントリスナで

reply_02 = leftFml_02 - rightFml_02;
が例えば
30 - 10
で
reply_02 に20が入りinputZが20になります

次は
inputZがrightFml_02になり、leftFml_02 は nullになっているので

null - 20
で
inputZが-20になります

もしイベントリスナが３つ登録されていれば
さらに
null - -20
となって
20に

４つならば
また-20になります

こういった現象がおきています

簡単なのは
unbind("click")
を全ての
Ans.click(function(){
の前において

イベントリスナをクリアすることです

jQueryで電卓を作っているのですが

演算が行われる度に

似たような質問が見つかりました

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

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング