Multiple keyup events in one JS FILE

Question

I have a JS file for my HTML web page. I want to have 4 things to check. If they hit a number, 1-4 on the keypad, it takes them to a specified url. The script works, but only if I have one.

When I put all 4 events in the js file, only the last one/most recent one works. Is there some kind of syntax that I'm doing wrong that's stopping all of 4 them from working?

To further explain, using this code, only this part of the script runs:

//If they hit keypad number 4
document.body.onkeyup = function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";

JS:

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
}
//If they hit keypad number 2
document.body.onkeyup = function(e){
    if(e.keyCode == 50){
        window.location.href = "foo";
    }
}
//If they hit keypad number 3
document.body.onkeyup = function(e){
    if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
}
//If they hit keypad number 4
document.body.onkeyup = function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

Answer 1

If you put all your condition into the same function it will work great. Otherwise you will overwrite your function every times. That is why you got the issue where the only event working was the last one. Last thing, try to use if and then else if. Otherwise you will verify every conditions every single times for no reason.

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
    else if(e.keyCode == 50){
        window.location.href = "foo";
    }
    else if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
    else if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

Answer 2

This behavior can be explained in this way: What you were trying to do is to assign a function to the onkeyup event. This happens on a same way as when working with variables. Let's say

var key = 1; 

is a "reduced" code for

document.body.onkeyup = function(e){
  // action for keypad 1
}

then, when assigning another event handling function to your onkeyup, you are doing

key = 2;

Ask yourself a question: does the variable key hold 1? No. That is being overwritten by the above statement. key holds 2 now. The 1 is "lost". That is the reason why the last event handler (for keypad 4) is being executed only. The last assignment has overwritten the previous assignment.

To work around this, you have two options:

1. group the event actions in one function
2. use EventTarget.addEventListener

With option 1, you can group your actions in one function like in the interactive example here below:

// input acts as your document.body
const inp = document.getElementById('foo');

inp.onkeyup = function(e) {
  if(e.keyCode == 49) {
    console.log('pressed keyCode 49'); // press 1
  }
  else if(e.keyCode == 50) {
    console.log('pressed keyCode 50'); // press 2
  }
  else if(e.keyCode == 51) {
    console.log('pressed keyCode 51'); // press 3
  }
  else if(e.keyCode == 52) {
    console.log('pressed keyCode 52'); // press 4
  }
};

<input id="foo" type="text" placeholder="type something">

Yet sometimes that is not flexible. Maybe you want to have two different actions to the keyup event. Of course you can group that in one function but what if another js file overwrites the function? Or another snippet further in the js file? That is not productive.

To prevent this, you can use option 2: .addEventListener which is a more robust approach. Here below is an interactive example:

// input acts as your document.body
const inp = document.getElementById('foo');

inp.addEventListener('keyup', function(e) {
  if(e.keyCode == 49) {
    console.log('first function: keyCode 49'); // press 1
  }
}); 
inp.addEventListener('keyup', function(e) {
  if(e.keyCode == 50) {
    console.log('second function: keyCode 50'); // press 2
  }
});

<input id="foo" type="text" placeholder="type something">

Also, I want to add another suggestion: you were using .keyCode which is deprecated. You can still use but it is not encouraged. It is possible that the browser developers decide to drop this in the future. That leads to a not functioning code. The problem is that each browser/OS has their own keyCodes which makes it less reliable.

For a clean approach, please consider to use KeyboardEvent.code