Switch Case with If Statements - Javascript & Jquery

Question

What's wrong with this code? It's supposed to capture all clicks within #ts_container div that are either buttons or anchors. It is also supposed to capture keypress events.

I'm trying to apply an If statement within each case to determine if keypress and / or click and if so it rewrites the new div name into the expressions at the bottom of the switch case and then the current text will fade out and new text fade in. W/o Keypress it works fine. As it is written now, it still works fine when you click but I can't get it to trigger on keypress events and I'm not sure what I'm doing wrong.

jQuery(document).ready(function($) {
    $('#ts_container').on('click keypress', 'button, a', function(e) {
        var id = $(this).attr("id");
        var fade_out;
        var fade_in;

        switch (id) {
            case 'start':
                if ((e.type === 'keypress' && e.which === 13) || (e.type == 'click')) {
                    fade_out = '#start_1';
                    fade_in = '#step_0';
                }
                break;
            case 'AC':
                if ((e.type === 'keypress' && e.which === 49 || e.which === 97) || (e.type == 'click')) {
                    fade_out = '#step_0';
                    fade_in = '#step_AC_1';
                }
                break;
            case 'step_AC_Continue_1':
                if ((e.type === 'keypress' && e.which === 13) ||
                    (e.type == 'click')) {
                    fade_out = '#step_AC_1';
                    fade_in = '#step_AC_2';
                }
                break;
            case 'Step_0_Option_1':
                if ((e.type === 'keypress' && e.which === 50 || e.which === 98) || (e.type == 'click')) {
                    fade_out = '#step_0';
                    fade_in = '#step_Heat_1';
                }
                break;
            case 'step_AC_Option_1':
                if ((e.type === 'keypress' && e.which === 49 || e.which === 97) || (e.type == 'click')) {
                    fade_out = '#step_AC_2';
                    fade_in = '#step_AC_3';
                }
                break;
            case 'step_AC_Option_2':
                if ((e.type === 'keypress' && e.which === 50 || e.which === 98) || (e.type == 'click')) {
                    fade_out = '#step_AC_2';
                    fade_in = '#step_AC_solution_electrical';
                }
                break;
            case 'step_AC_Option_3':
                if ((e.type === 'keypress' && e.which === 51 || e.which === 99) || (e.type == 'click')) {
                    fade_out = '#step_AC_2';
                    fade_in = '#step_AC_circuit_breaker';
                }
                default:
                    fade_out = '#start_1';
                    fade_in = '#step_0';
        }

        $(fade_out).fadeTo('fast', 0).css('visibility', 'hidden')
            .css('display', 'none');

        $(fade_in).delay(800).css('visibility', 'visible')
            .css('display', 'block').fadeTo('slow', 1);
    });
});

Answer 1

Your parenthesis in most of your if statements aren't correct:

if ((e.type === 'keypress' && e.which === 49 || e.which === 97) || (e.type == 'click'))
if ((e.type === 'keypress' && e.which === 50 || e.which === 98) || (e.type == 'click'))
if ((e.type === 'keypress' && e.which === 49 || e.which === 97) || (e.type == 'click'))
if ((e.type === 'keypress' && e.which === 50 || e.which === 98) || (e.type == 'click'))
if ((e.type === 'keypress' && e.which === 51 || e.which === 99) || (e.type == 'click')) 

&& takes priority over ||, so those end up being:

if (((e.type === 'keypress' && e.which === x) || e.which === y) || (e.type == 'click')) 

Change them to:

if (e.type === 'keypress' && (e.which === x || e.which === y) || e.type == 'click') 

Which translates to:

• It has to be a keypress with code x or y, OR
• It's a click event.

---

You're also registering the event handler on button and a elements:

.on('click keypress', 'button, a'

These generally don't listen to keyboard events unless you're already focusing on'm.

A fix would be to declare the function separately, and to register the handler like this:

function handleEvent(e) {
    // Do stuf
}

$('#ts_container').on('click', 'button, a', handleEvent);
$(window).on('keypress', handleEvent);