If statement ignores else option Javascript

Question

The If statement I created ignores the else option I place in it. The first three options work but if i put in something like (y,x,z), it will give me two random if statements, while still giving me the "sorry" message. After doing a lot of research I still cant figure out what I did wrong.

 var questionB = new Array ();
var key1= ["x", "y", "z"];
var key2= ["y","z","x"];
var key3 =["z", "x", "y"];

window.onload = function() {
var eSelect = document.getElementById('question1');
var optOtherReason = document.getElementById('displayresponse');
var options = document.getElementsByTagName("option");



eSelect.onchange = function() {



    questionB.push(eSelect.value);
    var y= document.getElementById("answerTest");
    y.innerHTML= questionB;



    if (eSelect.selectedIndex ==0) {

        optOtherReason.style.display = 'block';
        }



    if (questionB.length>2) {

            document.getElementById('question1').style.visibility="hidden";
            document.getElementById('generateButton').style.display = "block";
        }
        }
        }



    generate= function () {

        for ( var i=0; i<1; i++)
        {
        if (questionB[i]==key1[i]) {
            alert("your drink is an orange vanilla protein shake")
            document.getElementById("result1").style.display= "block";      

            }
        else if (questionB[i]==key2[i]) {
            alert("your drink is a strawberry nut protein shake")
            document.getElementById("result2").style.display= "block";      


            }
        else if(questionB[i]==key3[i]){
            alert("your drink is a wild berry protein shake")
            document.getElementById("result3").style.display= "block";      

        }
        else {document.getElementById("result4").style.display= "block";}   
        document.getElementById("result5").style.display= "block";

        }//end of generate function

    }

    function reloadPage(){
window.location.reload();
 }

<select id="question1" name="question" style="display:block;">
<option value=""></option>
<option value="x">Reason1</option>
<option value="y">Reason2</option>
<option value="z">Otherreason</option>
<!--<option value="none">None</option>-->

If you did not see a choice here, you may search for other sites. Your result is a orange vanilla shake. click here for ingredients .

Your result is a strawberry nut shake. click here for ingredients .

Your result is a wild berry shake. click here for ingredients .

Sorry, please try again.

Please play again.

Answer 1

if u have same operand in multiple if statements then try to use switch instead of nested if else statement that would be better approach; like here questionB[i]

generate = function(){
    for( var i=0; i<1; i++){
        switch(questionB[i]){
            case key1[i]:
                alert("your drink is an orange vanilla protein shake");
                document.getElementById("result1").style.display= "block";
                break;
            case key2[i]:
                alert("your drink is a strawberry nut protein shake");
                document.getElementById("result2").style.display= "block";
                break;
            case key3[i]:
                alert("your drink is a wild berry protein shake");
                document.getElementById("result3").style.display= "block";
            default:
                document.getElementById("result4").style.display= "block";
        }
        document.getElementById("result5").style.display= "block";
    }
}

Answer 2

Else ifs are not too good to use. Try the switch instead(This makes the code much more cleaner and readable as well):

    switch(questionB[i])
    case(key1[i]) {
        alert("your drink is an orange vanilla protein shake")
        document.getElementById("result1").style.display= "block";      

        }
    case(key2[i]) {
        alert("your drink is a strawberry nut protein shake")
        document.getElementById("result2").style.display= "block";      


        }
    case(key3[i]){
        alert("your drink is a wild berry protein shake")
        document.getElementById("result3").style.display= "block";      

    }
    default{document.getElementById("result4").style.display= "block";}   
    document.getElementById("result5").style.display= "block";

    }//end of generate function

Please check the syntax...not too sure if that is correct or not.