Multiple IF conditions

Question

My code has a textbox called 'answer_textbox'. When the user types in their answer into the textbox and presses enter, some jQuery code is supposed to take place. First of all i don't know how to have multiple if conditions. Are they supposed to be like this?

if($('#answer_textbox').val() == 4 && 'four') {

After that code is executes i have a else if that has a alert box that pops up is the user spells 'for' instead of 'four' for the answer.

if($('#answer_textbox').val() == 'for') {
    alert('FOUR you moron');
}

But this will only work when the user spells 'for' without putting a space after spelling it. Like if they spelled 'for' and put one single space after it it wouldn't work. How do i fix this?

This question has been answered *many* *many* times, what research did you do? As for the space, look in to https://api.jquery.com/jQuery.trim/. — Script47, Aug 08 '15 at 15:12

score 0 · Answer 1 · edited May 23 '17 at 12:14

You can check the index of the word in the value: check if the word 'for' exists in value:

if($('#answer_textbox').val().indexOf('for') >= 0) {

You also can trim the spaces of the value and then exact match:

if($('#answer_textbox').val().trim() == 'for') {

.... And with case insensitive:

if($('#answer_textbox').val().trim().toLowerCase() == 'for') {

You also can checking the closest match. Read more here: Getting the closest string match

Then about your multiple if's. It doesn't souns very nice. Why do you do it clientside?

if (condition)
{

}
else if (condition)
{

}
else if (condition)
{

}
else
{

}

Not very maintainable. Alternative is using switch:

switch (field)
{
   case: 'for':
      // add your logic
   break;

   case 'other':
      // add your logic
   break;

   default:
      // logic for default
}

Wesley Smith · Answer 2 · 2015-08-08T16:14:41.957

The short answer is that you can store all of your answers in lowercase then do $(selector).val().toString().toLowerCase().trim(); to get the trimmed lowercase value of the user's input

However, you could make the whole thing a lot simpler than you have it.

I would do something like the below. With this method, adding or removing questions is trivial, just add the question and answer to the array:

// create a multidimensional array of your questions and answers
// answers should be in lowercase to make things easier later
var questions=[ 
    ['What color is the sky?','blue'],
    ['What color is the ocean?','blue'],
    ['What comes after C?','d'],
    ['What comes after 9?','10']
    ];
// loop through the array and add an input and text for each to the page   
$.each(questions,function(index,element){
    $('#container').append('<input type="text" class="answer"> '+ element[0]+'<br>')
});
// when a user presses enter in one of the inputs, check the answer
$('#container input').on('keydown', function(e){
    if(e.which == 13) { // enter was pressed
       var question = $('.answer').index($(this)); // get the index of the current input
       var answer = $(this).val().toString().toLowerCase().trim(); // get the typed answer
       var correct =  questions[question][1]; // get the correct answer for this question
        if(answer==correct){
            $(this).removeClass('incorrect');
            $(this).addClass('correct'); // mark correct
        }
        else{
            $(this).removeClass('correct');
            $(this).addClass('incorrect'); // mark incorrect
            $('#result').html(correct+' you moron'); // funny message
            setTimeout(function(){ $('#result').html('') }, 2000); // remove message after a few seconds
        }
    }
});

.correct{
    background-color:#99FF99;   
}
.incorrect{
    background-color:#FF6666; 
}
#result{
    color:#FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
</div>
<div id="container">
</div>

Multiple IF conditions

2 Answers2