I'm trying to get text within a span element to change depending on the key pressed using the keydown function in Jquery.

The script runs fine until it es to all my if statements.

/

A sample of my script:

$(document).ready(pressed);
function pressed(){
    $('html').keydown(function (e) {
        var a = 65;var b = 66;var c = 67;
        if (e.keyCode == a){
            $('span').text('a');
            console.log('Key Pressed: a');
        }else if(e.keyCode == b){
            $('span').text('b');
            console.log('Key Pressed: b');
        }else if(e.keyCode == c){
            $('span').text('c');
            console.log('Key Pressed: c');
        }
    });
}

I have 2 different console logs that should get reported when a key is pressed. One when any key is pressed and one when a specific key gets pressed (currently only on a, b and c).

Can someone please tell me what I have done wrong and why it isn't functioning?

I'm trying to get text within a span element to change depending on the key pressed using the keydown function in Jquery.

The script runs fine until it es to all my if statements.

http://jsfiddle/rAhkc/1/

A sample of my script:

$(document).ready(pressed);
function pressed(){
    $('html').keydown(function (e) {
        var a = 65;var b = 66;var c = 67;
        if (e.keyCode == a){
            $('span').text('a');
            console.log('Key Pressed: a');
        }else if(e.keyCode == b){
            $('span').text('b');
            console.log('Key Pressed: b');
        }else if(e.keyCode == c){
            $('span').text('c');
            console.log('Key Pressed: c');
        }
    });
}

I have 2 different console logs that should get reported when a key is pressed. One when any key is pressed and one when a specific key gets pressed (currently only on a, b and c).

Can someone please tell me what I have done wrong and why it isn't functioning?

• javascript
• jquery

• That particular code works for me in Chrome: jsfiddle/MdMkv – Surreal Dreams Commented Aug 30, 2013 at 1:53
• Your code worked fine in Chrome, IE, and FF. jsfiddle/K53Lm Are you on a Mac or PC? Sometimes keycodes ( like right or left ctrl ) can be different between OS. You can try using e.which rather than e.keyCode – Dave Stein Commented Aug 30, 2013 at 2:00

4 Answers 4

you are overwriting e by setting its keycode.

make var ee = 69; or something.

Here is a DEMO

As Rooster / FaceOfJock said, you are overwriting e, that's why not worked.

I made some changes below only to improve the understanding and make code smaller.

// JavaScript Document
$(document).ready(pressed);
console.log('keyPressed.js is running');
function pressed(){
    console.log('pressed script began');    
    $('html').keydown(function (e) {
        console.log(e.keyCode);

        var codes = {
            q:81, w:87, e:69, r:82, t:84, y:89, u:85, i:73, o:79, 
            p:80, a:65, s:83, d:68, f:70, g:71, h:72, j:74, k:75, 
            l:76, z:90, x:88, c:67, v:86, b:66, n:78, m:77, space:32, 
            backspace:8, tab:9, caps:20, enter:13, shift:16, ctrl:17, 
            alt:18
        };

        $.each(codes,function(key,code){
            if(e.keyCode == code){
                $('span').text(key);
                console.log('Key: ' + key);
            }
        });
    });
}

Hope this helps.

Your problem is that you're overriding the meaning of e. Switch the name to evt or something.

Also, you should use a switch statement instead of all of those ifs.

$(function(){
    $(document).keyup(function(e){
        var a = 65;
        var b = 66;
        var c = 67;

        switch(e.which){
            case a:
                console.log('you pressed a')
            break;

            case b:
                console.log('you pressed b')
            break;

            case c:
                console.log('you pressed c')
            break;
        }
    })
})

here is the jsfiddle. run inspect element to see the results.

e.keyCode has proved troublesome for me when firing from javascript events. It is inconsistent between browsers. e.which works much better. I also thought a switch statement was more appropriate.

http://jsfiddle/PnjME/