Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 1 down vote favorite

I made this Javascript to hide, show and change some DIVs but I believe it's not really good code. Can you help me to make it better?

function colorM(n) {
    switch(n){
        case 1:
            document.getElementById("slideM1").style.backgroundColor="#009CFF";
            document.getElementById("slideM1").className="show";
            document.getElementById("slideM2").style.backgroundColor="silver";
            document.getElementById("slideM3").style.backgroundColor="silver";
            document.getElementById("slideM4").style.backgroundColor="silver";
            document.getElementById("slideM5").style.backgroundColor="silver";
            document.getElementById("slideM2").className="";
            document.getElementById("slideM3").className="";
            document.getElementById("slideM4").className="";
            document.getElementById("slideM5").className="";
            document.getElementById("slideC1").style.display="block";
            document.getElementById("slideC2").style.display="none";
            document.getElementById("slideC3").style.display="none";
            document.getElementById("slideC4").style.display="none";
            document.getElementById("slideC5").style.display="none";
            break;
        case 2:
            document.getElementById("slideM2").style.backgroundColor="#009CFF";
            document.getElementById("slideM2").className="show";
            document.getElementById("slideM1").style.backgroundColor="silver";
            document.getElementById("slideM3").style.backgroundColor="silver";
            document.getElementById("slideM4").style.backgroundColor="silver";
            document.getElementById("slideM5").style.backgroundColor="silver";
            document.getElementById("slideM1").className="";
            document.getElementById("slideM3").className="";
            document.getElementById("slideM4").className="";
            document.getElementById("slideM5").className="";
            document.getElementById("slideC1").style.display="none";
            document.getElementById("slideC2").style.display="block";
            document.getElementById("slideC3").style.display="none";
            document.getElementById("slideC4").style.display="none";
            document.getElementById("slideC5").style.display="none";
            break;
        case 3:
            document.getElementById("slideM3").style.backgroundColor="#009CFF";
            document.getElementById("slideM3").className="show";
            document.getElementById("slideM1").style.backgroundColor="silver";
            document.getElementById("slideM2").style.backgroundColor="silver";
            document.getElementById("slideM4").style.backgroundColor="silver";
            document.getElementById("slideM5").style.backgroundColor="silver";
            document.getElementById("slideM1").className="";
            document.getElementById("slideM2").className="";
            document.getElementById("slideM4").className="";
            document.getElementById("slideM5").className="";
            document.getElementById("slideC1").style.display="none";
            document.getElementById("slideC2").style.display="none";
            document.getElementById("slideC3").style.display="block";
            document.getElementById("slideC4").style.display="none";
            document.getElementById("slideC5").style.display="none";
            break;
        case 4:
            document.getElementById("slideM4").style.backgroundColor="#009CFF";
            document.getElementById("slideM4").className="show";
            document.getElementById("slideM1").style.backgroundColor="silver";
            document.getElementById("slideM2").style.backgroundColor="silver";
            document.getElementById("slideM3").style.backgroundColor="silver";
            document.getElementById("slideM5").style.backgroundColor="silver";
            document.getElementById("slideM1").className="";
            document.getElementById("slideM2").className="";
            document.getElementById("slideM3").className="";
            document.getElementById("slideM5").className="";
            document.getElementById("slideC1").style.display="none";
            document.getElementById("slideC2").style.display="none";
            document.getElementById("slideC3").style.display="none";
            document.getElementById("slideC4").style.display="block";
            document.getElementById("slideC5").style.display="none";
            break;
        case 5:
            document.getElementById("slideM5").style.backgroundColor="#009CFF";
            document.getElementById("slideM5").className="show";
            document.getElementById("slideM1").style.backgroundColor="silver";
            document.getElementById("slideM2").style.backgroundColor="silver";
            document.getElementById("slideM3").style.backgroundColor="silver";
            document.getElementById("slideM4").style.backgroundColor="silver";
            document.getElementById("slideM1").className="";
            document.getElementById("slideM2").className="";
            document.getElementById("slideM3").className="";
            document.getElementById("slideM4").className="";
            document.getElementById("slideC1").style.display="none";
            document.getElementById("slideC2").style.display="none";
            document.getElementById("slideC3").style.display="none";
            document.getElementById("slideC4").style.display="none";
            document.getElementById("slideC5").style.display="block";
            break;
        default: 
            document.getElementById("slideM1").style.backgroundColor="#009CFF";
            document.getElementById("slideM1").className="show";
            document.getElementById("slideM2").style.backgroundColor="silver";
            document.getElementById("slideM3").style.backgroundColor="silver";
            document.getElementById("slideM4").style.backgroundColor="silver";
            document.getElementById("slideM5").style.backgroundColor="silver";
            document.getElementById("slideM2").className="";
            document.getElementById("slideM3").className="";
            document.getElementById("slideM4").className="";
            document.getElementById("slideM5").className="";
            document.getElementById("slideC1").style.display="block";
            document.getElementById("slideC2").style.display="none";
            document.getElementById("slideC3").style.display="none";
            document.getElementById("slideC4").style.display="none";
            document.getElementById("slideC5").style.display="none";
            break;
    }
}
share|improve this question
1  
For starters: Instead of clearing the className of every div that you want to hide, assign a class name that already has the background-color: 'silver' and display: none. That alone saves you a lot of lines. – Amberlamps May 23 at 9:09
add comment (requires an account with 50 reputation)

1 Answer

up vote 3 down vote accepted

Loop through the ID's instead of doing a switch. This should do the same as yours

function colorM(id){

    // if not a number
    if (!(!isNaN(parseFloat(n)) && isFinite(n))) id =1;
    // default for numbers
    if (id > 5 || id < 1) id = 1;

    for (var i = 1; i <= 5; i++){

        if (id == i){
            document.getElementById("slideM" + i).style.backgroundColor="#009CFF";
            document.getElementById("slideM" + i).className="show";
            document.getElementById("slideC" + i).style.display="block";
        }
        else {
            document.getElementById("slideM" + i).style.backgroundColor="silver";
            document.getElementById("slideM" + i).className="";
            document.getElementById("slideC" + i).style.display="none";
        }
    }
}

Edit: added a check if id is numeric AND id is within range

share|improve this answer
That's almost perfect but I need also default state. Which is explained in default case. – Kyrbi May 23 at 11:47
The default is the same as 1? So make it in such a way that if you are trying to default it, (it is not any of the 5) it'll give 1 to the function – Topener May 23 at 13:10
added a check in it! – Topener May 23 at 13:13
add comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.