Does my JavaScript switch statement only work on case one?

FindleyDrummond
May 15, 2023
231 views
2 votes
3 Answers

<div class="education_selector"> 
            <a class="education_name" onclick="open_edu(1)">temp</a>
            <a class="education_name" onclick="open_edu(2)">temp</a>
            <a class="education_name" onclick="open_edu(3)">temp</a>
            <a class="education_name" onclick="open_edu(4)">temp</a>
            <a class="education_name" onclick="open_edu(5)">temp</a>
        </div>

        <div class="closed_edu_menu"></div>

var open_edu_menu = document.querySelector(".closed_edu_menu");
var one = true;
var two = true;
var three = true;
var four = true;
var five = true;

function open_edu(open_edu_num)
{
    switch (open_edu_num)
{
    case 1 & one == true :
        open_edu_menu.classList.add("open_edu_menu")
        open_edu_menu.classList.remove("closed_edu_menu")
        one = false;
        two = true;
        three = true;
        four = true;
        five = true;
    break;
    
    case 1 & one == false :
        open_edu_menu.classList.remove("open_edu_menu")
        open_edu_menu.classList.add("closed_edu_menu")
        one = true;
        two = false;
        three = false;
        four = false;
        five = false;
    break;

    case 2 & two == true :
        open_edu_menu.classList.add("open_edu_menu")
        open_edu_menu.classList.remove("closed_edu_menu")
        one = true;
        two = false;
        three = true;
        four = true;
        five = true;
    break;

    case 2 & two == false :
        open_edu_menu.classList.remove("open_edu_menu")
        open_edu_menu.classList.add("closed_edu_menu")
        one = false;
        two = true;
        three = false;
        four = false;
        five = false;
    break;

    case 3 & three == true:
        open_edu_menu.classList.add("open_edu_menu")
        open_edu_menu.classList.remove("closed_edu_menu")
        one = true;
        two = true;
        three = false;
        four = true;
        five = true;
    break;

    case 3 & three == false:
        open_edu_menu.classList.remove("open_edu_menu")
        open_edu_menu.classList.add("closed_edu_menu")
        one = false;
        two = false;
        three = true;
        four = false;
        five = false;
    break;

    case 4 & four == true:
        open_edu_menu.classList.add("open_edu_menu")
        open_edu_menu.classList.remove("closed_edu_menu")
        one = true;
        two = true;
        three = true;
        four = false;
        five = true;
    break;
    
    case 4 & four == false:
        open_edu_menu.classList.remove("open_edu_menu")
        open_edu_menu.classList.add("closed_edu_menu")
        one = false;
        two = false;
        three = false;
        four = true;
        five = false;
    break;

    case 5 & five == true:
        open_edu_menu.classList.add("open_edu_menu")    
        open_edu_menu.classList.remove("closed_edu_menu")
        one = true;
        two = true;
        three = true;
        four = true;
        five = false;
    break;

    case 5 & five == false:
        open_edu_menu.classList.remove("open_edu_menu")    
        open_edu_menu.classList.add("closed_edu_menu")
        one = false;
        two = false;
        three = false;
        four = false;
        five = true;
    break;
}
}

I was expecting a sort of dropdown menu where when you click on the selected one itll drop down a big square full of text later on when i add the text, but as of now only case one works and the others are completely unresponsive. Im not sure but it may be the one two three four and five variables messing it up, hopefully someone may be able to help me fix the problem and maybe even streamline my code

Answers

The switch sintax is wrong. You should change your function to this:

function open_edu(open_edu_num) {
    switch (open_edu_num) {
        case 1:
            if (one) {
                open_edu_menu.classList.add("open_edu_menu");
                open_edu_menu.classList.remove("closed_edu_menu");
                one = false;
                two = true;
                three = true;
                four = true;
                five = true;
            }
            break;
        // other cases...
    }
}

The switch statement could be a replacement for an if...else statement. It takes one argument (in your example, open_edu_num) and checks the value of it in the different cases.
Another example:

const n = 2;

function myFunction(n) {
    switch (n) {
        case 1:
            console.log("Hello");
        case 2:
            console.log("World");
        default: 
            console.log("Error");
    }
}

myFunction(n)

instead of

const n = 2;

function myFunction(n) {
    if (n === 1) {
        console.log("Hello");
    } else if (n === 2) {
        console.log("World");
    } else {
        console.log("Error");
    }
}

myFunction(n)

You could take an array instead of some variables with number as name and map a new value.

const
    open_edu_menu = document.querySelector(".closed_edu_menu");

let items = Array(5).fill(true);

function open_edu(open_edu_num) {
    open_edu_menu.classList.add("open_edu_menu");
    open_edu_menu.classList.remove("closed_edu_menu");
    open_edu_num--;
    items = items.map((_, i) => i === open_edu_num
        ? items[open_edu_num]
        : !items[open_edu_num]
    );
}

You should implement switch statement like below.

function open_edu(open_edu_num) {
    switch (open_edu_num) {
        case 1:
            if (one) {
                open_edu_menu.classList.add("open_edu_menu");
                open_edu_menu.classList.remove("closed_edu_menu");
                one = false;
                two = true;
                three = true;
                four = true;
                five = true;
            } else {
                open_edu_menu.classList.remove("open_edu_menu")
                open_edu_menu.classList.add("closed_edu_menu")
                one = true;
                two = false;
                three = false;
                four = false;
                five = false;
            }
            break;
        // other cases...
    }
}

Here I don’t understand your logic.
I think here you probably need isOpened variable for checking edu_menu status.
And you don’t have any operation except for this in open_edu function.
So your script could go like this.

var open_edu_menu = document.querySelector(".closed_edu_menu");
var isOpened = false;

function open_edu() {
    open_edu_menu.classList.add(!isOpened ? "open_edu_menu" : "closed_edu_menu");
    open_edu_menu.classList.remove(isOpened ? "open_edu_menu" : "closed_edu_menu");
}

Please signup or login to give your own answer.

Click here to cancel reply.