Switch statement error?

Question

I've been editing a script I made to turn a menu icon blue when it is clicked. The original script had 8 if statements. This worked perfectly, but when I changed the if statements to a switch, it stopped working. I've triple checked it for syntax errors, typos etc, but the menu icons remain grey!

Can anyone give me an explanation?

window.onload = function() {

    [].forEach.call(document.querySelectorAll('.navico'), function(el) { 
        el.addEventListener('click', imageButtonClickHandler); 
    });


    function imageButtonClickHandler() 
    {  

        switch(this.id) 
        {
           case(this.id.match("aboutnav")):

                grey();
                $('#abouttitle').css('color', 'blue');
                $('#a').css('color', 'blue');
            break;

           case(this.id.match("routenav")):

                grey();
                $('#routetitle').css('color', 'blue');
                $('#b').css('color', 'blue');

            break;

           case(this.id.match("enternav")):

                grey();
                $('#entertitle').css('color', 'blue');
                $('#c').css('color', 'blue');

            break;

           case(this.id.match("racedaynav")): 

                grey();
                $('#racedaytitle').css('color', 'blue');
                $('#d').css('color', 'blue');

            break;

           case(this.id.match("gallerynav")):

                grey();
                $('#e').css('color', 'blue');
                $('#gallerytitle').css('color', 'blue');

            break;

           case(this.id.match("newsnav")):

                grey();
                $('#f').css('color', 'blue');
                $('#newstitle').css('color', 'blue');

            break;

           case(this.id.match("resultsnav")): 

                grey();
                $('#g').css('color' , 'blue');
                $('#resultstitle').css('color', 'blue');

            break;

           case(this.id.match("contactnav")): 

                grey();
                $('#contacttitle').css('color', 'blue');
                $('#h').css('color', 'blue');
            break;

            }
        }
    }

};

Thanks!

Answer 1

Here is an Working example for your problem. JsFiddle link

HTML:

<div id="aboutnav" class="navico">Click 1</div>
<div id="routenav" class="navico">Click 2</div>
<div id="enternav" class="navico">Click 3</div>
<div id="racedaynav" class="navico">Click 4</div>

Javascript:

 $(document).ready(function () {

    [].forEach.call(document.querySelectorAll('div.navico'), function (el) {
        el.addEventListener('click', imageButtonClickHandler);
    });


    function imageButtonClickHandler() {
        switch (this.id) {
            case "aboutnav":

                $('#aboutnav').css('color', 'blue');
                $('#a').css('color', 'blue');
                break;

            case "routenav":

                //grey();
                $('#routenav').css('color', 'red');
                $('#b').css('color', 'blue');

                break;

            case "enternav":

                //grey();
                $('#enternav').css('color', 'yellow');
                $('#c').css('color', 'blue');

                break;

            case "racedaynav":

                //grey();
                $('#racedaynav').css('color', 'orange');
                $('#d').css('color', 'blue');

                break;
        }

    }
});

Answer 2

Change this.id.match("something") into case "something" if you are looking for the exact ID values. If you are trying to apply regular expressions to match parts of the string, I think you cannot use switch.

What the switch is doing in your case: for each case, it calls the match method and decides if the result of the function (array or null) is equal to your string. This never happens of course.