Why is the alert not displayed?

Question

Following a tutorial about game development with HTML5. And I can't figure out why this piece of code won't display the alert when I push the up key on my keyboard.

var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");

var keys = [];

window.addEventListener("keydown", function(e) {
  keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e) {
  delete keys[e.keyCode]
}, false);

if (keys[38]) alert("yep");

The Chrome console clearly shows that keys[38] is true and typing if (keys[38]) alert("yep"); in the console displays the alert. I think I am missing a fundamental thing here (or being fundamentally stupid). I will be glad to provide more info in case there is no obvious mistake in the JS code.

Thanks!

What/When do you think `if (keys[38]) alert("yep");` is doing? That if runs before you type any keys. — epascarello, Mar 07 '16 at 14:24
When javascript engine parses that line, the `keys[38]` is still not defined. And 2011 MacBook Pro it's not relevant here. — Marcos Pérez Gude, Mar 07 '16 at 14:25
You're **adding event listeners**. Only when the event listeners trigger (meaning a key is pressed) will the `function(e){...}` code run. And your `if (keys...` code is **outside** the event listener trigger function. — IMTheNachoMan, Mar 07 '16 at 14:26
@BartekBanachewicz I said with other words the same that you are answering. — Marcos Pérez Gude, Mar 07 '16 at 14:26
You should puth the alert inside the event listener in order for it to kick in... check my answer — Ronen Cypis, Mar 07 '16 at 14:31

score 2 · Accepted Answer · answered Mar 07 '16 at 14:24

The if will be called right at the end of your tick. The listeners start firing once you've left that tick. Hence, there's no chance for the keys array to be set when the if is executed.

The only pieces of your code that will be called afterwards are two callbacks passed to keydown and keyup events. If you want to react to those events, your code should reside inside of those callbacks.

score 1 · Answer 2 · answered Mar 07 '16 at 14:29

1

You need to put your code (the alert) inside the event listener like so:

window.addEventListener("keydown", function(e) {
  if(e.keyCode == 38) {
    alert('BOOYAKA');
  }
}, false);

answered Mar 07 '16 at 14:29

Ronen Cypis

21,182
1
20
25

Why is the alert not displayed?

2 Answers2