简单计算器上的重置按钮

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

empty（）函数删除所选元素的子节点，我想您可能只想将内容替换为其他内容（例如空字符串或0）或使用html（）函数即可。

Answer 2

问题来自每次按下操作员时都要注册新的Click侦听器的事实：

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

如果您想保持这种逻辑（我会重构很多事情:)），则需要确保不要调用这段代码（如果已被调用）。