I'm working on my personal website and I've build in some easter egg hotkeys. On every page pressing the 'm' key should hide the menu and pressing the 'g' key should launch a game ontop of the current page. On another page I have the 't' and 'l' keys perform other CSS changes. On every page the game and menu keys operate as expected except for the page with the listener for 't' and 'l'. There is clearly some kind of conflict preventing them all from working on each page. I believe it is because I have the listeners declared across three different files. I would like to keep it that way so that my site is more modular (i.e. I can easily transfer the js file for the game to any other website). Any ideas?

First listener, 'm' key: (nav-script.js)

document.addEventListener('keydown', function(evt){
   var evt = evt || window.event;
   if(evt.keyCode == 77){
      showNav();
   }
},false);

Second listener, 'g' key: (clickgame.js)

document.onkeydown = enable;

function enable(event){
    // Enables/disables the game

    var event = event || window.event;
    if(event.keyCode == 71 && !enabled){ // 71 is the code for the 'G' key
        game = true;
        enabled = true;
        setup();
    }else if(event.keyCode == 71){
        game = false;
        enabled = false;
        quitgame();
    }
}

Third listener, 'l' and 't' keys: (project-focus.js)

document.onkeydown = focusFeatures;

function focusFeatures(event){
    var event = event || window.event;
    if(event.keyCode == 76){
        lightswitch();
    }else if(event.keyCode == 84){
        textswitch();
    }
}

I'm working on my personal website and I've build in some easter egg hotkeys. On every page pressing the 'm' key should hide the menu and pressing the 'g' key should launch a game ontop of the current page. On another page I have the 't' and 'l' keys perform other CSS changes. On every page the game and menu keys operate as expected except for the page with the listener for 't' and 'l'. There is clearly some kind of conflict preventing them all from working on each page. I believe it is because I have the listeners declared across three different files. I would like to keep it that way so that my site is more modular (i.e. I can easily transfer the js file for the game to any other website). Any ideas?

First listener, 'm' key: (nav-script.js)

document.addEventListener('keydown', function(evt){
   var evt = evt || window.event;
   if(evt.keyCode == 77){
      showNav();
   }
},false);

Second listener, 'g' key: (clickgame.js)

document.onkeydown = enable;

function enable(event){
    // Enables/disables the game

    var event = event || window.event;
    if(event.keyCode == 71 && !enabled){ // 71 is the code for the 'G' key
        game = true;
        enabled = true;
        setup();
    }else if(event.keyCode == 71){
        game = false;
        enabled = false;
        quitgame();
    }
}

Third listener, 'l' and 't' keys: (project-focus.js)

document.onkeydown = focusFeatures;

function focusFeatures(event){
    var event = event || window.event;
    if(event.keyCode == 76){
        lightswitch();
    }else if(event.keyCode == 84){
        textswitch();
    }
}

• javascript
• dom
• keydown
• onkeydown

• Can you have a single listener that calls a function based on the key pressed? E.g., switch(event.keyCode){ case 76, 84: focusFeatures(event);break; case 71: runGame(event);break;}, where runGame() would run the code from your enable function. – ps2goat Commented Aug 5, 2014 at 21:49

3 Answers 3

The document.onkeydown = assignment overwrites all previously assigned handlers. You need to use addListener to effectively attach multiple handlers for the same event.

Or, you could just use jQuery as that will make things a whole lot easier.

When you do this:

document.onkeydown = focusFeatures;

You are replacing every other onkeydown listener with focusFeatures.

This is the same for document.onkeydown = enable.

You should do this instead:

document.addEventListener('keydown', enable, false); // for the games
document.addEventListener('keydown', focusFeatures, false); // for the focus features

Plus you should first declare the function, and then assign it to the listener.

Am I correct in understanding that each JS file is loaded on the page? If so then the last file to be loaded is clobbering the previous document.onkeydown handler.

Each document can have only one document.onkeydown handler so you will have to do some clever event dispatching to be sure they are propagated to every piece of code that needs it. Common libraries such as jQuery and Google Closure will handle this for you. Here is an example in jQuery:

$(document).keydown(function(e) {
    if (e.keyCode == 76) {
        window.console.log("pressed l!");
    }
});

$(document).keydown(function(e) {
    if (e.keyCode == 71) {
        window.console.log("pressed g!");
    }
});

And a link to it working in action: http://jsfiddle/v7v4L/