CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kyler
Kyler

Reputation: 76

Reset button on simple calculator

The calculator works fine the first time through but after I use the reset button it quits working properly. (note: I only have the multiplication set up till I can debug this). I am just beginning to learn how to use JavaScript. Any help would be great.

Here is my HTML code:

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>

Upvotes: 1

Views: 1273

Answers (2)

ValLeNain
ValLeNain

Reputation: 2304

The problem comes from the fact you're registering a new click listener everytime you press an operator:

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

If you want to keep the logic that way (I'd refactor a lot of things :) ), you need to make sure to not call this piece of code if it has already been called.

Upvotes: 1

LordNeo
LordNeo

Reputation: 1182

the empty() function removes the child nodes of the selected element, i think you may want to just replace the content with something else (like an empty string or 0) or use the html() function instead.

Upvotes: 1

Related Questions