We Keep Coding

Problem with an event registering multiple times

Currently I have it set to "if true == true" just to simplify because the problem isn't there.
switchBoxes(player){
if (true == true){
document.addEventListener("keypress", function switchListen(event) {
if (event.keyCode == 101) {
console.log("TrapActivated");
}
}, {once:true});
}
}
I have a problem in my game that I am making in javascript where I see "TrapActivated" hundreds of times in the console when I only press the key 'E' once. switchBoxes is a function in a class called collisionObjects. It is meant to create a box that acts as a switch and effects some other part of the map I created when you press the key 'E'. The player is able to move around the map freely around the canvas. Instead of "if true == true", I had collision detection for the player to see if he was touching the switch. The parameter 'player' is so that you can choose who is able to use that switch. When I press 'E', the console gives me anywhere from around 34 to 500 messages. It stops very soon after I have pressed 'E', around 100-200 milliseconds later. And I haven't done anything with the framerate, so it should be whatever the default is.
This is my first question on this site so please forgive me if it is not as specific as it should be.

First of all, use event.key instead of event.keyCode;
Second - Your switchBoxes() function create new listener on every call;
So it's absolutely correct behaviour. For avoid this You can try to use removeEventListener. But, in My opinion, the best way in this case - declarate switchListen in parent scope. Something like:
function switchListen(event) {
if (event.key === 'e') {
console.log("TrapActivated");
}
}
function switchBoxes(player){
if (true == true){
document.addEventListener('keypress', switchListen, {once:true});
}
}
So, You'll create the only one listener, that will be removed at first call because of once:true;

jQuery prevent keyboard press from working if target is undefined?

I have a ruby on rails application where the user can go to a previous or next question using their keyboard. One page is loaded at a time, which contains the link to a previous page, and the next page.
What I want to do is that if the user is at the very first page, pressing the left keyboard arrow key should not work at all, since it will be undefined. Additionally, if the user is at the very last page, pressing the right keyboard arrow key should not work either, since the next page will be undefined. Right now, if the user is at the first or last page and presses the left or right arrow key respectively, it throws an error in my application saying that "undefined" url can not be found.
I got the prev/next functionality working, but now am confused on how to proceed.
$(function() {
$(document).keyup(function(e) {
switch(e.keyCode) {
case 37 :
var a_href = $(this).find('a.previous_page').attr('href');
window.location=a_href;
break;
case 39 :
//window.location="/page-link-next";
var a_href = $(this).find('a.next_page').attr('href');
window.location=a_href;
break;
}
});
});

Use .length on a jQuery collection (such as .find) to figure out how many elements are in the collection.
Another thing to keep in mind is that var gets hoisted; having two vars declaring the same variable name inside a function isn't exactly valid. Better to declare the variable name elsewhere (such as at the top) and reassign, or use something other than a switch statement so you can use const, which has block scope and is a lot easier to deal with:
$(function() {
$(document).keyup(function(e) {
const keyCode = e.keyCode;
if (keyCode === 37) {
const a = $(this).find('a.previous_page');
if (a.length === 0) return;
window.location= a.attr('href');
} else if (keyCode === 39) {
const a = $(this).find('a.next_page');
if (a.length === 0) return;
window.location= a.attr('href');
}
});
});
It's better not to use switch if you can avoid it - it's unnecessarily wordy and error-prone.

Detecting enter key pressed

Are there any ways available in jquery to detect whether Enter key has pressed?
I know that we can use keycodes/charset to identify the Enter key press, but I do not need to hard code an integer value in my js script as it will become a magical number. I need to know whether there are any other possible ways to detect Enter key press, which is something like e.shiftKey for detecting shift key press using event object.
Thanks.

So, you want to detect the Enter key being pressed without hardcoding a 13 for the keycode.
Now, I could suggest using 6.5*2 as the keycode, then, but that'd be silly.
The real answer is that there is no built-in constant for the Enter key, like the Shift key has.
The reason Shift has it, is because that key is often pressed in combination with other keys. You can't detect a Shift keyDown event when pressing Shift+A, for example, because the event for the modifier has passed already when you're handling the keyDown event for the A.
Frankly, your only real option would be to hardcode a application-wide constant that says something along the lines of:
window.keyCodes = {
Enter: 13,
SomeKey: 99
}
Then you can check against it like this:
if(e.keyCode === keyCodes.Enter)
Or, it may be possible to write a function that compares the character of the entered key with a string that contains only a return, but then you'd just be hardcoding a return, any way.

The keycode for the enter key is : 13
if(e.keyCode == 13)
//do something...

This is the immediate way that people detect this particular event, but there are other ways to identify the number 13.
var DOM_VK_RETURN = 13;
$(document).on('keydown', function(e) {
var code = e.keyCode || e.which;
if(code == DOM_VK_RETURN) {
console.log("Enter key pressed");
}
});
However, if you do not want to use an integer to detect the key, we could use hexadecimal.
http://jsfiddle.net/hk2eL/3/

How can I catch 2+ key presses at once?

Well lately i got interested in creating JS games. (not an area i have experience with but it interests me).
i know there are several gaming engines for JS out there but i dont really want to create a game. rather i am curious on how things work / how can i create one.
I have several questions:
Anyone with suggestions on where can I read about it? Prerequisite (what knowledge is needed).
I tried making a small game of something walking in a rectangular. By binding keyup to the window and checking the event.which to get the key that was pressed. I realized that if i clicked on 2 buttons same time only 1 of them is being registered. how can i overcome that?
$(window).keyup(function(event){
globalEvent = event.which;
});

To directly answer your second question.
Here is one way:
var keyPressed = {};
$(window).keydown(function(e) {
keyPressed[e.which] = true;
}).keyup(function(e) {
keyPressed[e.which] = false;
});
Now you can use keyPressed whenever you want to determine if a key is down:
// wherever
var key1 = 65, key2 = 66; // A and B
if (keyPressed[key1] && keyPressed[key2]) {
// A and B are both being pressed.
}

In order to detect multiple keys being held down, use the keydown and keyup events.
var keys = {};
$(document).keydown(function (e) {
keys[e.which] = true;
});
$(document).keyup(function (e) {
delete keys[e.which];
});

Purely as an experiment, I am trying to make it absolutely impossible to do anything but enter more data into an input field; feasible?

I've come very close, I think, but can't seem to cover every single one of the fronts listed below:
disable use of backspace, delete, left arrow key, home key, and ctrl for various reasons (all of which prove difficult once you factor in the confusion caused by holding down two at the same time)
make certain that the user cannot exit the field and then re-enter in a loation other than the end (onfocus and onclick attributes cover this)
the toughy: remember the value every time a character is successfully added such that if the user decides to modify the value with JavaScript code injected via the location bar, the original data can be restored
Seeing as how there'd be very little (zero, to be honest) practical use for this, I'm merely pursuing it as a demonstration of knowledge. Alas, it seems I haven't enough; nonetheless, here's the code I'm presently working with for reference:
<input id="test" />
<script>
var d = '', kd = 0;
cancel = function(event)
{
event.target.value = '';
event.target.value = d;
};
handle_up = function(event)
{
if (event.keyCode == 36 || event.keyCode == 37) // home, left
{
kd = 0;
cancel(event);
event.target.value = d;
}
if (event.keyCode != 8 && event.keyCode != 46) // backspace and delete
d = event.target.value;
else // backspace
event.target.value = d; // set to stored ("cached") value
};
handle_down = function(event)
{
if (kd == 1)
{
cancel(event);
return false;
}
if (event.keyCode == 36 || event.keyCode == 37)
{
kd = 1;
cancel(event);
}
if (event.keyCode == 8 || event.keyCode == 46)
{
kd = 1;
cancel(event);
}
};
HTMLElement.prototype.perma = function()
{
this.setAttribute('onfocus', 'cancel(event)');
this.setAttribute('onclick', 'cancel(event)');
this.setAttribute('onkeyup', 'handle_up(event)');
this.setAttribute('onkeydown', 'handle_down(event)');
};
$('#test').perma();
</script>
Again, even though it'd just be for the sake of novelty, I think it'd be really cool to see the cleverness required to get an input box to deny any action but data entry.

BTW since this is for fun. Have you tried to do a whitelist of what you can enter instead of a blacklist of what you can't do.

How about checking the inputted data, running a comparison on the new input, and refusing anything that isn't an extension of what was already there? A little lengthy, perhaps, especially as the field becomes longer, but effective?

Another thing to consider, is that validation schemes - such as the one you describe - should not take place purely on the client side.
If javascript is disabled, for example, it is possible for somebody to submit unvalidated data. If this occurs, the server side code will use it and the condition that you are testing for will go unnoticed.
Always backup client side validation with the same validation on the server.