将if / else语句转换为switch语句

Question

I have found an example on http://www.w3schools.com/ of how to create a responsive navigation bar

The example has a little bit of JavaScript in the form of a if/else statement. I would prefer to use a switch statement.

However, my switch statement does not work when i click the icon and does not provide any errors.

Example's JS code:

    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }

My Switch statement:

var x = document.getElementById("myTopnav");
switch (x) {
    case "topnav":
        x.className += " responsive";
        break;

    default:
        x.className = "topnav";
}

Answer 1

You're comparing x :

switch (x)

But the original code is comparing x.className :

if (x.className === "topnav")

Switch on x.clasName instead:

switch (x.className)

Answer 2

You are very close!

Just swap in x.className in your switch(x) statement, and you're good to go:

var x = document.getElementById("myTopnav");
// use x.className below...
switch (x.className) {
    case "topnav":
        x.className += " responsive";
        break;

    default:
        x.className = "topnav";
}