簡単な電卓のリセットボタン

Question

電卓は最初からうまく動作しますが、リセットボタンを使うと正常に機能しなくなります。 （注：これをデバッグできるまで、私は乗算を設定しているだけです）。 JavaScriptの使い方を学び始めたところです。どんな助けも素晴らしいだろう。ここで

は私のHTMLコードは次のとおりです。

var input = ""; 
 
var firstInput = ""; 
 
var secondInput = ""; 
 
var answer = ""; 
 

 
$(".numbers").click(function(){ 
 
    $("#topBar").text(input += $(this).text()) 
 
}); 
 

 
function operation() { 
 
    firstInput = input; 
 
    $("#topBar").empty(); 
 
    $(".numbers").click(function(){ 
 
    $("#topBar").text(secondInput += $(this).text()) 
 
    }); 
 
} 
 

 
$("#buttonx").click(function(){ 
 
    if(input !== ""){ 
 
    operation(); 
 
    } 
 
}); 
 

 
$("#buttonEqual").click(function(){ 
 
    answer = firstInput * secondInput; 
 
    $("#topBar").text(answer); 
 
}); 
 

 
$("#resetButton").click(function(){ 
 
    input = ""; 
 
    firstInput = ""; 
 
    secondInput = ""; 
 
    answer =""; 
 
    $("#topBar").empty(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="topBar"></div> 
 
    <div class="row"> 
 
    <div class="butStyle"> 
 
     <button class="numStyle numbers" id="button7">7</button> 
 
    </div> 
 
    <div class="butStyle"> 
 
     <button class="numStyle numbers" id="button8">8</button> 
 
    </div> 
 
    <div class="butStyle"> 
 
     <button class="numStyle numbers" id="button9">9</button> 
 
    </div> 
 
    <div class="butStyle"> 
 
     <button class="numStyle operation" id="buttonDivide">&divide;</button> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="butStyle"> 
 
     <button class="numStyle numbers" id="button4">4</button> 
 
    </div> 
 
    <div class="butStyle"> 
 
     <button class="numStyle numbers" id="button5">5</button> 
 
    </div> 
 
    <div class="butStyle"> 
 
     <button class="numStyle numbers" id="button6">6</button> 
 
    </div> 
 
    <div class="butStyle"> 
 
     <button class="numStyle operation" id="buttonx">x</button> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="butStyle"> 
 
     <button class="numStyle numbers" id="button1">1</button> 
 
    </div> 
 
    <div class="butStyle"> 
 
     <button class="numStyle numbers" id="button2">2</button> 
 
    </div> 
 
    <div class="butStyle"> 
 
     <button class="numStyle numbers" id="button3">3</button> 
 
    </div> 
 
    <div class="butStyle"> 
 
     <button class="numStyle operation" id="buttonMinus">-</button> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="butStyle"> 
 
     <button class="numStyle numbers" id="button0">0</button> 
 
    </div> 
 
    <div class="butStyle"> 
 
     <button class="numStyle numbers" id="buttonDot">.</button> 
 
    </div> 
 
    <div class="butStyle"> 
 
     <button class="numStyle" id="buttonEqual">=</button> 
 
    </div> 
 
    <div class="butStyle"> 
 
     <button class="numStyle operation" id="buttonAdd">+</button> 
 
    </div> 
 
    </div> 
 
    <button id ="resetButton">Reset</button> 
 
</div>

Answer 1

問題は、演算子を押すたび、新しいクリックリスナを登録しているという事実から来ています： ））、既に呼び出されている場合は、このコードを呼び出さないようにする必要があります。

Answer 2

空（）関数は、選択した要素の子ノードを削除し、私はあなただけの何か他のものでコンテンツを交換するかもしれないと思います（空の文字列や0のように）か、代わりにhtml（）関数を使用してください。あなたは方法は（私は多くのことをリファクタリングしたいロジックを維持したい場合は

$(".numbers").click(function(){ 
    $("#topBar").text(secondInput += $(this).text()) 
}); 

：