Question

I’ve been trying to program a pingpong game without jQuery (challenge from Software Design teacher), and am planning on using onkeypress to move the paddles. However, I’m not sure how to attach a specific key to the function specified in the event handler.

It’s not terribly relevant, but here’s my code:

HTML:

<div id="Paddle1" class="paddle" onkeypress="PaddleMovement1(event)"></div>
<div id="Paddle2" class="paddle" onkeypress="PaddleMovement3(event)"></div>

JavaScript:

var PaddleMovement1 = function(){
    document.getElementById('Paddle1Up').style.animationPlayState="running";
    setTimeout(Paddle1Stop1, 25)
    var Paddle1Stop1 = function(){
        document.getElementById('Paddle1Up').style.animationPlayState="paused";
    };
};

var PaddleMovement2 = function(){
    document.getElementById('Paddle1Down').style.animationPlayState="running";
    setTimeout(Paddle1Stop2, 25)
    var Paddle1Stop2 = function(){
        document.getElementById('Paddle1Down').style.animationPlayState="paused";
    };
};

var PaddleMovement3 = function(){
    document.getElementById('Paddle2Up').style.animationPlayState="running";
    setTimeout(Paddle2Stop1, 25)
    var Paddle2Stop1 = function(){
        document.getElementById('Paddle2Up').style.animationPlayState="paused";
    };
};

var PaddleMovement4 = function(){
    document.getElementById('Paddle2Down').style.animationPlayState="running";
    setTimeout(Paddle2Stop2, 25)
    var Paddle2Stop2 = function(){
        document.getElementById('Paddle2Down').style.animationPlayState="paused";
    };
};

Finally, the complete thing can be found in this jsfiddle:

http://jsfiddle.net/2RfzF/2/

Answer 1

keypress is only fired for keypresses that result in typeable characters, not other keys. To detect other keys, use keydown and keyup. This should be fairly clear from the specification:

A user agent must dispatch this event when a key is pressed down, if and only if that key normally produces a character value.

This page is a handy guide to the madness that is keyboard events in JavaScript across browsers…

Separately, for your purposes I’d probably trap the events on document rather than on a specific element (keydown and keyup bubble, so that works).

For example:

(function() {
    if (document.addEventListener) {
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keydown", keyUpHandler, false);
    }
    else if (document.attachEvent) {
        document.attachEvent("onkeydown", function() {
            keyDownHandler(window.event);
        });
        document.attachEvent("onkeydown", function() {
            keyUpHandler(window.event);
        });
    }
    else {
        // If you want to support TRULY antiquated browsers
        document.onkeydown = function(event) {
            keyDownHandler(event || window.event);
        };
        document.onkeyup   = function(event) {
            keyUpHandler(event || window.event);
        };
    }

    function keyDownHandler(e) {
        var key = e.which || e.keyCode;
        display("keydown: " + key);
    }

    function keyDownHandler(e) {
        var key = e.which || e.keyCode;
        display("keyup: " + key);
    }

    function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
    }
})();

Live Copy | Source