How to make if/ else statement evaluate for all variables

Question!

I'm trying to create a game in which a user "bets" on if the next card will be in between the previous two shown. In order to calculate that, I created a random number through 52 and set it equal to an array variable value. I need a number 2-14 as opposed to 1-52 (to evaluate the # of the card in case 2 cards with same # and different suite show). To do that, I used slice to get the 1st letter of the array item and store it in a variable (num1, num2, numUser).

I then used if else statements to give the face cards (10, jack, queen, king, ace) # values. The issues is, I need to apply this to all 3 variables. Currently, the statement stops when it identifies a face card and sets the # value. If there are multiple face cards, the statement only applies to the first.

I tried wrapping this in a for loop and making it run 3 times- ex.(for (var i = 0; i > 3; i++), but that didn't work. Sorry if this is confusing, any help is greatly appreciated.

function outputCards(){
    rand1 = Math.floor((Math.random() * 52));
    rand2 = Math.floor((Math.random() * 52));
    $('#cardUser').attr("src", "#");    
    if(rand1 == rand2){
        rand2 = Math.floor((Math.random() * 52));   
    } else {
        card1 = cards[rand1];
        card2 = cards[rand2];
        $('#cardOne').attr("src", "imgs/" + card1);
        $('#cardTwo').attr("src", "imgs/" + card2);
    }
}

function userCard(){
    rand_user = Math.floor((Math.random() * 52));
    if(rand_user == rand1 || rand_user == rand2){
        rand_user = Math.floor((Math.random() * 52));
    } else {
        user_card = cards[rand_user];
        $('#cardUser').attr("src", "imgs/" + user_card);
    }
}


function outcome(){
    userCard();
    num1 = card1.slice(0,1);
    num2 = card2.slice(0,1);
    numUser = user_card.slice(0,1);
    if(num1 == "j"){
        num1 = 11;
    } else if (num2 == "j") {
        num2 = 11;
    } else if (numUser === "j") {
        numUser = 11;
    } else if (num1 == "q") {
        num1 = 12;
    } else if (num2 == "q") {
        num2 = 12;
    } else if (numUser === "q") {
        numUser = 12;
    } else if (num1 == "k") {
        num1 = 13;
    } else if (num2 == "k") {
        num2 = 13;
    } else if (numUser === "k") {
        numUser = 13;
    } else if (num1 == "a") {
        num1 = 14;
    } else if (num2 == "a") {
        num2 = 14;
    } else if (numUser === "a") {
        numUser = 14;
    } else if(num1 == 1){
        num1 = 10;
    } else if(num2 == 1){
        num2 = 10;
    } else if(numUser == 1){
        numUser = 10;
    } else {


    }
}


Answers
well theres more efficient ways to accomplish this, the most straightforward (and beginner friendly) one is to use 3 else if trees not a single one.

if(num1 == "j"){
    num1 = 11;
} else if (num2 == "j") {
    num2 = 11;
} else if (numUser === "j") {
    numUser = 11;
...

you have these grouped together when they need to be separate

if(num1 == "j"){
    num1 = 11;
} else if (num1 == "q") {
    num1 = 12;
} else if (num1 === "k") {
    num1 = 13;
...


if(num2 == "j"){
    num2 = 11;
} else if (num2 == "q") {
    num1 = 12;
} else if (num2 === "k") {
    num2 = 13;
...

this can be accomplished by putting the if statements in a function

function outcome(number){
    if(number == "j"){
        return 11;
    } else if (number == "q") {
        return 12;
    } else if (number === "k") {
      ...
    } //etc
}

num1 = outcome(card1.slice(0,1))
num2 = outcome(card2.slice(0,1))
numUser = outcome(user_card.slice(0,1));

you can also create an object map to map the card letter with a number value

var cardMap = {
  j: 11,
  q: 12,
  k: 13,
  ...
}

then you can do

num1 = cardMap[card1.slice(0,1)]
num2 = cardMap[card2.slice(0,1)]
numUser = cardMap[user_card.slice(0,1)]
By : PhilVarg


An if-elseif block will stop execution whenever it finds a true conditional, regardless of how many you have.

So you want to evaluate the variable based on the first character, and you know that will always be the same, right? This is a great opportunity to use a simple function that does just that one job (as all functions should do).

function getCardValueFromFirstCharacter(character) {
  // you may need to check for the number as well:
  // if (character == "1") {
  //   return 1;
  // } else if (character == "2") {
  //   return 2;
  // }
  // etc..
  if (character == "j") {
    return 11;
  } else if (character == "q") {
    return 12;
  }
  // etc..
}

Now, in your other function, your outcome function, you can call this one with each of your desired inputs:

 function outcome() {
   userCard();
   num1 = getCardValueFromFirstCharacter(card1.slice(0,1));
   num2 = getCardValueFromFirstCharacter(card2.slice(0,1));
   numUser = getCardValueFromFirstCharacter(user_card.slice(0,1));
}

In this way, we have our single function that is solely responsible for identifying the value of a card based on the first character. This function can change its implementation to affect all of places we need to use it - so, let's say you decide Jokers should be evaluated as 20, you can add it to that one function, and all of your code will now work with that new value. Thus, breaking apart our code into tiny functions that do one thing and are referenced for that one thing all over our codebase is important.

By : kpsharp


This video can help you solving your question :)
By: admin