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();
}
}
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.