Same results


#1


No matter what the choice is here my code keeps giving the result is a TIE. I used what I think is a nested if but with no success.

I have also included the HTML file that is associated with the project under the Javascript code. Please help and thank you.


window.onload = function(){//START
// Your code goes here













var button = document.getElementById("fight_btn");

button.onclick = function(){
    

var user_choice = document.getElementById("user_hand").value;
var cpu_choice = document.getElementById("cpu_hand").value;
    
cpu_choice = Math.floor(Math.random()*3 + 1);


if (cpu_choice === 1){
   cpu_choice = "Rock";
   alert("choice for cpu is Rock");
}else if(cpu_choice === 2){
   cpu_choice = "Paper";
   alert("choice for cpu is Paper");
}else if(cpu_choice===3){
    cpu_choice = "Scissors";
    alert("choice for cpu is Scissors");
}else{
    document.getElementById("winner").innerText = "Please try again!!!"
}

//Display cpu_choice in the text box

user_choice = document.getElementById("user_hand").value;


document.getElementById("cpu_hand").value = " " + cpu_choice;
cpu_choice = document.getElementById("cpu_hand").value;





//declaring the compare function
function compare(user_choice,cpu_choice){ 



//if choice is the same	
    if (user_choice===cpu_choice){
        document.getElementById("winner").innerText = "The result is a tie!!!";
        alert("The result is a tie!!!");

//if user_choice is rock        
        }else if((user_choice==="Rock") && (cpu_choice==="Scissors")){
            document.getElementById("winner").innerText = "You win!!!";
            alert("You Win!");
        }else if((user_choice==="Paper") && (cpu_choice==="Rock")){
            document.getElementById("winner").innerText = "You win!!!";
            alert("You Win!!");
        }else if((user_choice==="Scissors") && (cpu_choice==="Paper")){
            document.getElementById("winner").innerText = "You Win!!!"
            alert("You Win!!!");
    }else{
        document.getElementById("winner").innerText = "CPU Wins!!!!"
        alert("CPU Wins!!!!");
    }


}//Compare ends here            
compare();


}//Onclick ends here

   






} //END HERE


<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Rock Paper Scissors</title>

    <!-- Font Awesome -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous" type="text/css">

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" type="text/css">

    <!-- Bootstrap theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" type="text/css">

    <!-- Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous" type="text/javascript"></script>

    <script src="rps.js"></script>

</head>

<body>
    <div id="content" class="container-fluid">
        <h1>Rock Paper Scissors</h1>

        <p>Choose a hand from the box below and click "Fight".</p>

        <h1 id="winner"></h1>

            <label for="user_hand">Choose your weapon:</label>
            <select name="user_hand" id="user_hand">
                <option value=''> Choose a hand </option>
                <option value='Rock'>Rock</option>
                <option value='Paper'>Paper</option>
                <option value='Scissors'>Scissors</option>
            </select>
            
            <label for="cpu_hand">Computer Picked:</label><input type="text" name="cpu_hand" id="cpu_hand" disabled/>

            <button type="button" id="fight_btn" onclick="fight_click()"  class="btn btn-primary">Fight</button>

    </div>
</body>
</html>


#2

you don't pass any arguments when callig the function:

compare();

while your function does have parameters:

function compare(user_choice,cpu_choice)

oopsie?


#3

great that is done.

Now the result is "CPU Wins!!!!"

I dont know if it is considering the code in-between the original if else statement.

}else if((user_choice==="Rock") && (cpu_choice==="Scissors")){
document.getElementById("winner").innerText = "You win!!!";
alert("You Win!");
}else if((user_choice==="Paper") && (cpu_choice==="Rock")){
document.getElementById("winner").innerText = "You win!!!";
alert("You Win!!");
}else if((user_choice==="Scissors") && (cpu_choice==="Paper")){
document.getElementById("winner").innerText = "You Win!!!"
alert("You Win!!!");
}else{
document.getElementById("winner").innerText = "CPU Wins!!!!"
alert("CPU Wins!!!!");
}


#4

for some reason cpu_choice is udefined in the compare function:

function compare(user_choice,cpu_choice){ 
   alert(cpu_choice);

but i can't seem to figure out why


#5

me neither since I delcare it in a couple of line above


#6

weird, do i need to look into it? Debugging someone else his code is really time consuming, or do you think you can manage now you know where the problem is?


#7

I've in at it now for the second week. It was a class project that was due last week. Submitted it partially done but it is really getting to me.
I guess I can ask the instructor.
Anything from your side would be greatly appreciated.


#8

could you post the latest version of your code? So i am sure i am working on the right thing


#9

sure thing. Here goes.

window.onload = function(){//START
// Your code goes here

var button = document.getElementById("fight_btn");

button.onclick = function(){

var user_choice = document.getElementById("user_hand").value;
var cpu_choice = document.getElementById("cpu_hand").value;

cpu_choice = Math.floor(Math.random()*3 + 1);

if (cpu_choice === 1){
cpu_choice = "Rock";
alert("choice for cpu is Rock");
}else if(cpu_choice === 2){
cpu_choice = "Paper";
alert("choice for cpu is Paper");
}else if(cpu_choice===3){
cpu_choice = "Scissors";
alert("choice for cpu is Scissors");
}else{
document.getElementById("winner").innerText = "Please try again!!!"
}

//Display cpu_choice in the text box

user_choice = document.getElementById("user_hand").value;

document.getElementById("cpu_hand").value = " " + cpu_choice;
cpu_choice = document.getElementById("cpu_hand").value;

//declaring the compare function
function compare(user_choice,cpu_choice){

//if choice is the same
if (user_choice===cpu_choice){
document.getElementById("winner").innerText = "The result is a tie!!!";
alert("The result is a tie!!!");

//if user_choice is rock
}else if((user_choice==="Rock") && (cpu_choice==="Scissors")){
document.getElementById("winner").innerText = "You win!!!";
alert("You Win!");
}else if((user_choice==="Paper") && (cpu_choice==="Rock")){
document.getElementById("winner").innerText = "You win!!!";
alert("You Win!!");
}else if((user_choice==="Scissors") && (cpu_choice==="Paper")){
document.getElementById("winner").innerText = "You Win!!!"
alert("You Win!!!");
}else{
document.getElementById("winner").innerText = "CPU Wins!!!!"
alert("CPU Wins!!!!");
}

}//Compare ends here
compare(user_choice,cpu_choice);

}//Onclick ends here

} //END HERE


#10

here is the solution:

function compare(user_choice,cpu_choice){
cpu_choice = cpu_choice.trim()

trim() will cut of any leading or trailing spaces, because you get the values from the html pages, additional spaces sometimes occur, so it is a good idea to trim


#11

UNREAL!!!

It worked. as far as I can tell.
Thanks you so much.

:smiley:


#12