Javascript Calculator keyup issue, event not triggering when typing quickly

Javascript Calculator keyup issue, event not triggering when typing quickly
0

#1

Hey Guys,
Thanks for your help,
The calculator is currently work in progress.
https://codepen.io/hydracus/pen/eGObzd
I want:

  • the number keys turn yellow on keydown,
  • the number keys revert back to the original colour on keyup.
    This currently works as intended when numbers are typed in slowly.

However this does not work as intended when numbers are quickly typed in.

  • the keydown function on line 1 , changing the colour to yellow works
  • but the keyup function on line 2, reverting the colour back, doesn’t

Can anyone advise what topic I can google or lookup to address this problem?


#2

Try:

function buttonPress(input) {
  inputKeyValue = "number" + input.key;
  document.getElementById(inputKeyValue).style.backgroundColor =
    "rgba(255,255,255,0.5)";
}

Because you were using a global variable inputKeyValue inside your displayNumbers function, if you typed really fast (meaning you pressed down another key before the previous key was completely unpressed), the value of inputKeyValue was a different value and so the most current key down was being stored in inputKeyValue.


#3

Thank you very much for your help and thank you for your explanation!