CODEWITHSUNDEEP
javascript
Fryderider
Fryderider

Reputation: 23

A tiny "Guess the number" game doesn't work as intended

I tried to make a silly little game in JavaScript where you're prompted to guess a number between 1-10. The computer then randomly picks a number and if it's the same as you guessed it says "You guessed right!", else "Try again!".

However, the computer input and the user input is NEVER the same! What am I doing wrong?

var userChoice = prompt("Make a guess from 1 to 10");
var computerChoice = Math.random();

if (computerChoice < 0.1) {
    computerChoice = 1;
}
else if (computerChoice < 0.2){
    computerChoice = 2;
}
else if (computerChoice < 0.3){
    computerChoice = 3;
}
else if (computerChoice < 0.4){
    computerChoice = 4;
}
else if (computerChoice < 0.5){
   computerChoice = 5;
}
else if (computerChoice < 0.6){
    computerChoice = 6;
}
else if (computerChoice < 0.7){
    computerChoice = 7;
}
else if (computerChoice < 0.8){
    computerChoice = 8;
}
else if (computerChoice < 0.9){
    computerChoice = 9;
}
else {
    computerChoice = 10;
}

var compare = function(choice1, choice2){
    if (choice1 === choice2){
        console.log("You guessed right!");
    }
    else{
        console.log("Try again!");
    }
};

compare(userChoice, computerChoice);

Upvotes: 2

Views: 131

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

function id(sel) {return document.getElementById(sel); }

var $usrINP  = id("usrINP"),
    $playBTN = id("playBTN"),
    $resDIV  = id("resDIV");

function compare(){
    var userNum = parseInt( $usrINP.value, 10 ),
        compNum = Math.ceil( Math.random() * 10 ),
        result  = "YOU:"+userNum+" COMPUTER:"+compNum+"<br>";
    if(!userNum || userNum > 10) return alert("Enter a valid Number from 1-10");
    result += userNum===compNum ? "YOU WON!" : "WRONG!";
    $resDIV.innerHTML = result;    
}

$playBTN.addEventListener("click", compare, false);
<input id=usrINP type=text maxlength=2>
<input id=playBTN type=button value=Play>
<div id=resDIV></div>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML

In your example ("String") "2", using === Strict Equality, will never match 2 (Number) so either use == (loose equality) or parseInt your input value.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators
Which equals operator (== vs ===) should be used in JavaScript comparisons?

Upvotes: 0

hrnnvcnt
hrnnvcnt

Reputation: 944

if your variable computerChoice is an number (Math.random return a number) you'll probably need to convert the userChoice variable to number before your function compares the values.

In order to do this, you could use parseInt() function:

compare(parseInt(userChoice), computerChoice);

With the strict equality operator === you will need that both values and type are the same.

The function prompt() returns always a string.

Some links:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

Upvotes: 0

Chase Sandmann
Chase Sandmann

Reputation: 5005

First of all, welcome to StackOverflow and I wish you the best in your programming adventures! The JavaScript prompt method returns a string, which you are comparing to the computer's numerical input. You should convert the string input into a number through parseInt().

var userChoice = parseInt(prompt("Make a guess from 1 to 10"));

You could improve the program with additional error handling and the computer's number choice could be more efficient, but this should get you started.

Upvotes: 0

Bill the Lizard
Bill the Lizard

Reputation: 405775

You're comparing a string (userChoice) to a number (computerChoice) using === in your compare function. That will always return false. Use == instead, since it will coerce the user input to a number before comparing.

Upvotes: 2

Related Questions