I am experiencing an issue with my calculator. It works fine initially, but after using the reset button, it stops functioning properly. Currently, I only have the multiplication set up as I debug this problem. I am new to JavaScript and would appreciate any assistance.
Below 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">÷</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>