Clever Geek Handbook

Alternative if, else if, else if, else if, etc in javascript

I have the following code which changes depending on the url parameter and then hides the selected option in the form. those. www.example.com?type=images

Eventually there will be over 20 different parameters. I would like to know what is better than having a huge amount if elses. Just a diagram of how to do this is ok, I'm new to this so I'd like to get an answer and learn from it. Thank.

var type = getURLparameter('type'); //from another function

if (type == "images"){
    var selectDiv =('divid');
    var selectField = ('selectid');
    document.getElementById(selectField).options[1].selected=true;
    document.getElementById(selectDiv).style.visibility="hidden";
}
else if (type == "pizza") {
    var selectDiv =('divid');
    var selectField = ('selectid');
    document.getElementById(selectField).options[2].selected=true;
    document.getElementById(selectDiv).style.visibility="hidden";
}
else (type == "cheese") {
    var selectDiv =('divid');
    var selectField = ('selectid');
    document.getElementById(selectField).options[3].selected=true;
    document.getElementById(selectDiv).style.visibility="hidden";
}
+2


source to share


6 answers


In the interest of non-repeating code, I would write my code like this, with a lookup table for the index number and no repeating code for each option:



var typeNum = {
    images: 1,
    pizza: 2,
    cheese: 3
};

var type = getURLparameter('type');

if (type in typeNum) {
    document.getElementById('selectid').options[typeNum[type]].selected = true;
    document.getElementById('divid').style.visibility = "hidden";
}
+10


source


Use the switch:



var selectDiv   = document.getElementById('divid'), 
    selectField = document.getElementById('selectid');

switch(type){
    case "images":
        selectField.options[1].selected=true;
        selectDiv.style.visibility="hidden";
    break;

    case "pizza":
        selectField.options[2].selected=true;
        selectDiv.style.visibility="hidden";
    break;

    case "cheese":
        selectField.options[3].selected=true;
        selectDiv.style.visibility="hidden";
    break;
}
+6


source


Place them in an object and find the one you want.

var type_table = {
    images: {
        div_id: 'somevalue',
        select_id: 'somevalue',
        option_index: 0
    },

    pizza: {
        div_id: 'somevalue',
        select_id: 'somevalue',
        option_index: 1
    },

    cheese: {
        div_id: 'somevalue',
        select_id: 'somevalue',
        option_index: 2
    }
};

then ...

var the_type = type_table[ type ];

document.getElementById(the_type.select_id).options[the_type.option_index].selected=true;
document.getElementById(the_type.div_id).style.visibility="hidden";

If the IDs are in fact all the same, then naturally you should cache those items, not recycle them, and the only thing you need to store in the table is the index number.

It looks like the only unique part is the index. If so, do the following:

var type_table = {
    images:0,
    pizza:1,
    cheese:2, // and so on
};

var the_div = document.getElementById('div_id');
var the_select = document.getElementById('select_id');

then inside the function that runs the code ...

the_select.options[ type_table[ type ] ].selected=true;
the_div.style.visibility="hidden";
+4


source


maybe the instruction switch

will help you

http://www.tutorialspoint.com/javascript/javascript_switch_case.htm

also install selectDiv

before to reduce the amount of code :)

switch(type) {
    case 'images':
        //blah
        break;
}
+3


source 


document.getElementById(selectField).options[(type == "images" ? 1 : (type == "pizza" ? 2 : 3))].selected=true;
document.getElementById(selectDiv).style.visibility="hidden";
0


source


you can use an array of functions similar to the world popular dictionary solution in C #,

var mySwitch={};
mySwitch['images'] = function(){ 
    var selectDiv =('divid');
    var selectField = ('selectid');
    document.getElementById(selectField).options[1].selected=true;
    document.getElementById(selectDiv).style.visibility="hidden";
};
mySwitch['pizza'] = function(){...};

then do

mySwitch[type]();
0


source






More articles:


All Articles