All of my code works except for one thing: if I use the buttons on-screen first, THEN use the keyboard, the answer does not display. for example, if I click 5+5 then hit the button "=" I get 10, but if I clear, then type 5+5 and hit enter, the answer does not display. However, if the page is refreshed I can use the keyboard just fine with no issues, the answer displays.
In my code "enter" is set to do the same thing "=" button is.
I found the source of the problem (I hope) but I'm unsure how to fix it: in my compute function, when I use the keyboard after I used the buttons, my if(isNaN) returns a 1 on the console.log (so I could find where the code was going wrong) I'm not sure why it thinks what's coming in is not a number, because it works fine when the buttons havent been touched.
Here is the code for equals button:
equalsButton.addEventListener('click', button => {
calculator.compute()
calculator.updateDisplay()
})
Here is the code for enter:
document.onkeyup = e => {
//code for numbers 1-9 & operations//
else if(e.key === "Enter") {
calculator.compute()
calculator.updateDisplay()
console.log("the answer is " + calculator.compute())
}
Here is the compute function code:
compute() {
let computation
const prev = parseFloat(this.previousOperand)
const current = parseFloat(this.currentOperand)
if(isNaN(prev) || isNaN(current)) return 1
switch(this.operation) {
case '+':
computation = prev + current
break
case '-':
computation = prev - current
break
case '*':
computation = prev * current
break
case '÷':
computation = prev / current
break
default:
return
}
this.currentOperand = computation
this.operation = undefined
this.previousOperand = ''
console.log(this.currentOperand)
}
Any help is appreciated!
firstly, just as a matter of best practice, you needn't create an object in your click function if you don't need to work with the event--
equalsButton.addEventListener('click',() => {
calculator.compute()
calculator.updateDisplay()
})
now,
quick fix is to make the keydown event an alias for your click() function =>
else if(e.key === "Enter") {
equalsButton.click()
// console.log("the answer is " + calculator.compute())
}
i did notice also, you call calculator.compute() as the first step of your 'Enter' event handler, and then you call it again in the console.log() statement, which clears the previous computation (by setting it to an empty string aka NaN)
hope all this helps!