Reputation: 4492

Jquery keydown function

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 comes to all my if statements.

http://jsfiddle.net/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?

Upvotes: 0

Answers (4)

user2676843

Reputation: 59

$(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.net/PnjME/

Upvotes: -1

Perazzo

Reputation: 1147

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.

Upvotes: 3