If/Else jQuery: else statement not working

Question

The else statement in this jQuery code is not working. I've tried placing the if/else statement into a function (after parsing through Stackoverflow), but I haven't been able to get this to work. Do you have any ideas as to what is the problem? Is this a syntax error?

Here's a link to the Fiddle .

jQuery

$( "button" ).click(function() {
    myAnswer();
  });

 $( "input" ).change(function() {
    myAnswer();
 });     

function myAnswer () {
    $(".pick").removeClass('my-display').addClass('my-no-display');
    var myPick = $("input").val();
    function myFinalAnswer () {
        if (myPick == "ram","mary","jon","shyam","shannon","tate","quy","sanjay") {
            var myString = "." + myPick; 
            var myFinalPick = myString.toLowerCase();
            $( myFinalPick).removeClass('my-no-display').addClass('my-display'); 
        }
        else {
            $(".none").removeClass('my-no-display').addClass('my-display');
        }
    }
    myFinalAnswer();
}

HTML

<div class="container">
<div class="row">
    <div class="col-xs-12 top-line">
        <h2>Who will win the Game of Thrones?</h2>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 my-choices">
        <p>Ram, Jon, Shyam, Shannon, Tate, Quy, Mary, or Sanjay?</p>
    </div>
</div>
<div class="row">
    <div class="col-xs-8 my-input">
        <input type="text" onfocus="if(this.value == 'Take your best guess!') { this.value = ''; }" placeholder="Take your best guess!" />
    </div>
    <div class="col-xs-4 my-button">
        <button class="submit-button">
            Submit
        </button>   
    </div>
</div>      
<div class="row">
    <div class="col-xs-12 my-answer">
       <span class="mary pick my-no-display">We all love the walk of shame.</span>
        <span class="jon pick my-no-display">Isn't he too busy with tindr?</span>
        <span class="shyam pick my-no-display">We always knew his fingers were little.</span>
        <span class="shannon pick my-no-display">Because that's where a Khaleesi belongs.</span>
        <span class="tate pick my-no-display">Ramsey? Ewww.</span>
        <span class="quy pick my-no-display">What she said.</span>
        <span class="ram pick my-no-display">So into it!</span>
        <span class="sanjay pick my-no-display">Another Lannister?</span>
        <span class="none pick my-no-display">This is a terrible idea.</span>
    </div>          
</div>
</div>

Answer 1

With jQuery, you could use the inArray function to check if a value is on a given array, for sample:

var myArray = ["ram","mary","jon","shyam","shannon","tate","quy","sanjay"];

if ($.inArray(myPick, myArray))
{
 // .. code 
}

Answer 2

Change your if statement to

if (["ram","mary","jon","shyam","shannon","tate","quy","sanjay"].indexOf(myPick) > -1)

Applying the same condition multiple times in an if statement does not work by seperating by comma. In this case, you can use indexOf which will return -1 if it does not exist in the array.

 $("button").click(function() { myAnswer(); }); $("input").change(function() { myAnswer(); }); function myAnswer() { $(".pick").removeClass('my-display').addClass('my-no-display'); var myPick = $("input").val(); function myFinalAnswer() { if (["ram", "mary", "jon", "shyam", "shannon", "tate", "quy", "sanjay"].indexOf(myPick) > -1) { var myString = "." + myPick; var myFinalPick = myString.toLowerCase(); $(myFinalPick).removeClass('my-no-display').addClass('my-display'); } else { alert("Hello else."); $(".none").removeClass('my-no-display').addClass('my-display'); }; } myFinalAnswer(); } 

 body { font-size: 16px; } input { height: 40px; width: 100%; padding-left: 10px; color: grey; margin-left: 13px; } .top-line { text-align: center; } .my-choices { text-align: center; margin-bottom: 5px; } .my-input { text-align: center; } .my-answer { padding: 10px; border: 1px solid red; border-radius: 5px; margin: 8px 27px; width: 91%; height: 150px; line-height: 1.7; background-color: black; color: white; font-weight: 600; } .my-answer { text-align: center; } .my-button { text-align: center; line-height: 2; } .submit-button { padding: 3px 12px; margin-bottom: 0px; font-size: 16px; line-height: 26px; font-family: #A52A2A; font-weight: 700; text-transform: uppercase; color: white; background: red; cursor: pointer; text-align: center; vertical-align: middle; box-shadow: 0px 2px 0px #666; border-radius: 5px; border: none; width: 80%; } .my-display { display: inline; } .my-no-display { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-xs-12 top-line"> <h2>Who will win the Game of Thrones?</h2> </div> </div> <div class="row"> <div class="col-xs-12 my-choices"> <p>Ram, Jon, Shyam, Shannon, Tate, Quy, Mary, or Sanjay?</p> </div> </div> <div class="row"> <div class="col-xs-8 my-input"> <input type="text" onfocus="if(this.value == 'Take your best guess!') { this.value = ''; }" placeholder="Take your best guess!" /> </div> <div class="col-xs-4 my-button"> <button class="submit-button"> Submit </button> </div> </div> <div class="row"> <div class="col-xs-12 my-answer"> <span class="mary pick my-no-display">We all love the walk of shame.</span> <span class="jon pick my-no-display">Isn't he too busy with tindr?</span> <span class="shyam pick my-no-display">We always knew his fingers were little.</span> <span class="shannon pick my-no-display">Because that's where a Khaleesi belongs.</span> <span class="tate pick my-no-display">Ramsey? Ewww.</span> <span class="quy pick my-no-display">What she said.</span> <span class="ram pick my-no-display">So into it!</span> <span class="sanjay pick my-no-display">Another Lannister?</span> <span class="none pick my-no-display">This is a terrible idea.</span> </div> </div> </div> 

Answer 3

I don't really understand what you're trying with this line:

if (myPick == "ram","mary","jon","shyam","shannon","tate","quy","sanjay")

I think it's supposed to be:

if (myPick === "ram" || myPick === "mary" || myPick === "jon" || myPick === "shyam" || myPick === "shannon" || myPick === "tate" || myPick === "quy" || myPick === "sanjay")