Victor Emmanuel Victor Emmanuel - 20 days ago 4
Javascript Question

javascript function if else. Pico Fermi Bagel game

Instead of "You win" I'm getting " Pico Pico Pico??
why the response is returning pico pico pico instead of You win.. since is the last statement is you win..........
This are the rules of the game.......
The computer generates a three digit number where each digit must be unique. You are provided infinite turns to guess the number. The computer can give the following hints in response to each guess:

Pico: One digit is correct but in the wrong place
Fermi: One digit is correct and in the right place
Bagels: No digits are correct

// global V
var compChoice1, compChoice2, compChoice3;
var number1, number2, number3;
var response;
//functions to create random numbers
function getRandomNum() {
return Math.floor(Math.random() * 10)
}

function startGame(){
do{
compChoice1 = getRandomNum();
compChoice2 = getRandomNum();
compChoice3 = getRandomNum();
}
while (compChoice1 == compChoice2 || compChoice1 == compChoice3 || compChoice2 == compChoice3);
}


//here we'll get the usr Numnber
function userNum(){
number1 = document.getElementById('guessNum1').value;
number2 = document.getElementById('guessNum2').value;
number3 = document.getElementById('guessNum3').value;
console.log(number1,number2,number3);
}

// Compare Usr numbers vs computer ramdom nums
function compareUsrvsCom(){

var response = "";


if (number1 == compChoice1) response += "pico ";
else if (number1 == compChoice2 || number1 == compChoice3) response += "fermi ";


if (number2 == compChoice2) response += "pico ";
else if (number2 == compChoice1 || number2 == compChoice3) response += "fermi ";


if (number3 == compChoice3) response += "pico ";
else if (number3 == compChoice1 || number3 == compChoice2) response += "fermi ";


if (number1 === compChoice1 && number2 === compChoice2 && number3 === compChoice3) response += "You win";
else if (response == "" ) return ("beagls ")


return response;
// return response;
}
//Start game Btn
document.getElementById('startGame').addEventListener('click', function() {
startGame();
console.log(compChoice1,compChoice2, compChoice3);
});

document.getElementById("guessButn").addEventListener("click", function() {
userNum();
compareUsrvsCom();
console.log(compareUsrvsCom());
document.getElementById("demoBagel").innerHTML = compareUsrvsCom();
});

Answer

== is not the same as ===

The problem is that you have two types that you are trying to compare. With

number1 = document.getElementById('guessNum1').value;

you are getting a string you can see this by with

console.log(typeof number1);

With the compChoice1 you are getting an number. You can see that with

console.log(typeof Math.floor(Math.random() * 10));

You are mixing the two comparison operators == and ===. The == operator is less strict.

5 == "5" is true, however 5 === "5" is false.

This is why your "you win" if statement is failing. You should almost always use the === operator and make sure you are comparing the same types.

So we want to parse the value of guessNum1 to be an integer, you can do that with parseInt.

Use parseInt to convert user input to number type

function userNum(){
   number1 = parseInt(document.getElementById('guessNum1').value);
   number2 = parseInt(document.getElementById('guessNum2').value);
   number3 = parseInt(document.getElementById('guessNum3').value);
   console.log(number1,number2,number3, typeof number1);
}

This will give you all number types.

Prefer === over ==

So convert the comparison operators in compareUsrvsCom

function compareUsrvsCom(){

   var response = "";

   if (number1 === compChoice1) response += "pico  ";
   else if (number1 === compChoice2 || number1 === compChoice3) response += "fermi  ";

   if (number2 === compChoice2) response += "pico  ";
   else if (number2 === compChoice1 || number2 === compChoice3) response += "fermi  ";

   if (number3 === compChoice3) response += "pico  ";
   else if (number3 === compChoice1 || number3 === compChoice2) response += "fermi  ";

   if (number1 === compChoice1 && number2 === compChoice2 && number3 === compChoice3) response += "You win";
   else if (response == "" ) return ("beagls   ")

   return response;
}