Question

I want to make my ‘esc’-key to do something different based on current situation.. For example I have a button that shows a toolbar and I want the ‘esc’-key to hide it, but I also want the ‘esc’-key to open a box for closing the current page, and again if you press the ‘esc’-key it should hide the closing box.

I thought it would be something like this, but it only opens the closing box. It doesn’t close it when I type ‘esc’ again, neither does it hide the toolbox when it is shown. It just opens the closing box on top.

function esc_key_command() {
    if (toolboxIsShown) {
        $('.tool_box').hide();
        var toolboxIsShown = false;
    } else if (CloserIsShown) {
        $('.closer').stop().fadeOut(200);
        var CloserIsShown = false;
    } else {
        $('.closer').stop().fadeIn(200);
        var CloserIsShown = true;
    }
}

I know it has nothing to do with calling the ‘esc’ key because it at least returns something when the key is typed.

Answer 1

The var declarations is the problem. The scope of the variables are local, so every time you call the function, they are reset.

If you want to do it with variables, you need to make them set outside of the function scope.

Why use variables when you can check the state

function esc_key_command() {
    var tools = $('.tool_box');
    var closer = $('.closer');
    if (tools.is(":visible")) {
        $('.tool_box').hide();
    } else if (closer.is(":visible")) {
        $('.closer').stop().fadeOut(200);
    } else {
        $('.closer').stop().fadeIn(200);
    }
}