Set variable inside keypress() event and get one inside keyup() event

Question

I have some code where i combine .keypress() and .keyup() events:

    $(this).on('keypress keyup', function (e) {
        var layout = 'undefined';
        if (e.type == "keypress") {
            // set layout
            layout = 'en';    
        } else {
            // use layout
            alert(layout);
        }
    });

As we know the order is .keydown() -> .keypress() -> .keyup(). But on .keyup() event variable layout is always undefined.

What am i doing wrong?

Answer 1

Move the layout variable outside the event function - you are resetting it to 'undefined' every event.

var layout = 'undefined';
$(this).on('keypress keyup', function (e) {
    if (e.type == "keypress") {
        // set layout
        layout = 'en';    
    } else {
        // use layout
        alert(layout);
    }
});

Answer 2

make your layout variable global

var layout = 'undefined';
$(this).on('keypress keyup', function (e) {
    if (e.type == "keypress") {
        // set layout
        layout = 'en';    
    } else {
        // use layout
        alert(layout);
    }
});

Answer 3

Try this,

HTML

<input />

SCRIPT

 var layout = 'undefined';
 $('input').on('keypress keyup', function (e) {
     if (e.type == "keypress") {
         // set layout
         layout = 'en';
     } else {
         // use layout
         alert(layout);
     }
 });

Demo