Jquery keydown function

Question

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?

That particular code works for me in Chrome: jsfiddle.net/MdMkv — Surreal Dreams
– Surreal Dreams, Commented Aug 30, 2013 at 1:53
Your code worked fine in Chrome, IE, and FF. jsfiddle.net/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
– Dave Stein, Commented Aug 30, 2013 at 2:00

Charaf JRA · Accepted Answer · 2013-08-30 01:57:55Z

4

you are overwriting e by setting its keycode.

make var ee = 69; or something.

Here is a DEMO

edited Aug 30, 2013 at 1:57

Charaf JRA

8,3551 gold badge36 silver badges45 bronze badges

answered Aug 30, 2013 at 1:49

Rooster

10.1k8 gold badges49 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dave Stein Over a year ago

Where is he setting e? He is only comparing against it. Maybe he updated since this post?

Rooster Over a year ago

@DaveStein check the jsfiddle he posted. He setting a var for every letter like var q = 81; etc. He refrained from posting that part here though so thats why it seems like it works.

Charaf JRA Over a year ago

i edited the post so that values of variables can be seen in the code

Perazzo · Accepted Answer · 2013-08-30 02:16:39Z

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.

RebelFist · Accepted Answer · 2013-08-30 01:49:48Z

1

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.

answered Aug 30, 2013 at 1:49

RebelFist

5594 silver badges11 bronze badges

Comments

Andrew Barber · Accepted Answer · 2013-08-30 04:25:13Z

-1

$(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/

edited Aug 30, 2013 at 4:25

Andrew Barber

40.3k20 gold badges97 silver badges124 bronze badges

answered Aug 30, 2013 at 1:50

user2676843

597 bronze badges

Collectives™ on Stack Overflow

Jquery keydown function

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related