Rock Paper Scissors code not working correctly


#1

I'm attempting to build on the rock, paper scissors javascript code by creating a webpage game version. The goal is for the user select rock... then click 'play' for the code to run the button is clicked. The goal is for images set to 'display:none' to show depending on the 'math.Random()'.

Here is the code

//html submit button
<div id="compchoice"> <button onclick="submit()" class="btn btn-primary" id="submitbtn-sm">Play</button> </div>

//css
#paperimg, #rockimg, #scissorsimg {
  height: 150px;
  width: 150px;
display: none;  
}


#rock{position: absolute;
  z-index:0;}
#paper{position: absolute;
  z-index:1;}
#scissors{position: absolute;
  z-index:2;}

//JS
$(document).ready(function(){
     $("#rockbtn").click(function(){
   $('#rockimg').show("slow");
     }); 

       $("#paperbtn").click(function(){
  $('#paperimg').show("slow");
    });
  
  $("#scissorsbtn").click(function(){
   $('#scissorsimg').show("slow");
    
 });

  var computerChoice = Math.random();
  
function submit(computerChoice) {
      if (computerChoice < 0.34) {
document.getElementById("#rockimg").style.display = 'block';

} else if(computerChoice <= 0.67) {
document.getElementById("#paperimg").style.display = 'block';

} else {
document.getElementById("#scissorsimg").style.display = 'block';
}
}

});

My questions:
1. Is 'document.getElementById' used correctly to display an hidden image?
2. Am I using 'math.Random()' correctly?
3. Is the 'submit' button code correct?

I've done the research but am not sure if this approach is correct. Any suggestions will be very greatly appreaciated.


#2

@oc2215
I'll give a little sample....
otherwise provide the FULL code you are using...

<!DOCTYPE html>
<head><title>Rock,Paper,Scissors!</title>
<style>
h2 {
    font-family:arial;
}
div {
   border: 1px solid black;
   height:20px;
   width:180px;
   text-align:center;
   }

form {
    display: inline-block;
}

#button {
    display: inline-block;
    height:20px;
	width:170px;
	background-color:#cc0000;
	font-family:arial;
	font-weight:bold;
	color:#ffffff;
	border-radius: 5px;
	text-align:center;
	margin-top:2px;
}

.list {
	font-family:garamond;
	color:#cc0000;
}
.uC {
   background-color:red;
  }
.cC {
   background-color:white;
  }
.result {
   background-color:blue;
  }

</style>
</head>
<body>
<!-- from Jquery - Modifying HTML Elements - 11. Click Da Button! Do It Naoughw! --></!-->
		<h2>Rock Paper Scissors</h2>
		<h5>Give your Choice (rock, paper, scissors)</h5>
		<form name="checkListForm">
			<input type="text,reset" name="checkListItem"/>
		</form>
		<div id="button">Show a Result</div>
		<br/>
		<div class="list" style="opacity: 0"></div>

  <div class="uC"></div>
  <div class="cC"></div>
  <div class="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript">
  
//var userChoice = prompt("Do you choose rock, paper or scissors?");
var main = function() {
 $('#button').click( function() {
     var userChoice = $('input[name=checkListItem]').val();
     var computerChoice = Math.random();
     if (computerChoice < 0.34) {
         computerChoice = "rock";
     }
	 else if(computerChoice <= 0.67) {
         computerChoice = "paper";
     }
	 else {
         computerChoice = "scissors";
     }
	 
     var compare = function(choice1, choice2) {
        if (choice1 === choice2) {
            return "The result is a tie!";
        }
		else if (choice1 === "rock") {
            if (choice2 === "scissors") {
                return "Rock wins";
            } 
			else {
                return "Paper wins";
			}
        }
		else if (choice1 === "paper") {
            if (choice2 === "rock") {
                return "Paper wins";
            } 
			else {
                return "Scissors wins";
			}
        }
		else if (choice1 === "scissors") {
            if (choice2 === "rock") {
                return "Rock wins";
            } 
			else {
                return "Scissors wins";
			}
		}
	}

  var result = compare(userChoice, computerChoice);
//   var docString= "<p>User: " + userChoice + "</p>" + 
//                  "<p>Computer: " + computerChoice + "</p>"+
//				  "<p>Result: " + result + "</p>"
//   document.write( docString);
  $('.uC').text("userChoice: " + userChoice);
  $('.cC').text("computerChoice: " + computerChoice);
  $('.result').text("Result: " + result);
  $('input[name=checkListItem]').val("");
   });
  };
  $(document).ready(main);
</script>

</body>
</html>

#3

Thank you so much for the response leonhard.wettengmx.n...

here is my full code

<body>
<div class = "well"> <h1>Rock, Paper, Scissors</h1>
<p>Let's Play!</p>
</div>
  
   <div class="row">
     <div class="human col-sm-4 well"><div class="panel panel-default">
  <div class="panel-body">Human</div>
       </div>
     
<button onclick="#" class="btn btn-primary"  id="rockbtn"><i class="fa fa-hand-rock-o" aria-hidden="true"/></i></button>
 
 <button class="btn btn-danger" id="paperbtn">
 <i class="fa fa-hand-paper-o" aria-hidden="true"></i></button>

<button class="scissors btn btn-primary" id="scissorsbtn"><i class="fa fa-hand-scissors-o" aria-hidden="true" ></i></button>

     <button onclick="submit()" class="btn btn-primary" id="submitbtn">Submit</button>  
     
       <img src= "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Rock-paper-scissors_(rock).png/1024px-Rock-paper-scissors_(rock).png" id="rockimg"> 
       
<img src="  https://upload.wikimedia.org/wikipedia/commons/a/af/Rock-paper-scissors_(paper).png" id="paperimg">
         
   <img src ="http://previews.123rf.com/images/nito500/nito5001109/nito500110900094/10508893-scissors-sign-in-rock-paper-scissors-game-Stock-Photo.jpg" id= "scissorsimg">          </div>
     
    
   <!--human ends -->    

     <div class="col-sm-4 well">
      
  </div>
      <!--score board ends -->
     
     <div class="computer col-sm-4 well"><div class="panel panel-default">
  <div class="panel-body">Computer</div>
       </div>
       <div id="compchoice"> </div>
  </div>
      <!--computer ends -->    
  
</body>

h1 {
  font-family: 'Aref Ruqaa', serif;
}

.human {
  height: 350px;
  width: 300px;
}

.computer {
  height: 350px;
  width: 300px;
}


#paperimg, #rockimg, #scissorsimg {
  height: 150px;
  width: 150px;
display: none;  
}

#title{position: absolute;
  z-index:3;}
#rock{position: absolute;
  z-index:0;}
#paper{position: absolute;
  z-index:1;}
#scissors{position: absolute;
  z-index:2;}

.hide {
    display: none;
}

$(document).ready(function(){
     $("#rockbtn").click(function(){
   $('#rockimg').show("slow");
     }); 

       $("#paperbtn").click(function(){
  $('#paperimg').show("slow");
    });
  
  $("#scissorsbtn").click(function(){
   $('#scissorsimg').show("slow");
    
 });

  var computerChoice = Math.random();
  
function submit(computerChoice) {
      if (computerChoice < 0.34) {
document.getElementById("#rockimg").style.display = 'block';

} else if(computerChoice <= 0.67) {
document.getElementById("#paperimg").style.display = 'block';
} else {
document.getElementById("#scissorsimg").style.display = 'block';
}
}

});

By the looks of your code, Input forms seem like a better way to go. My goal was to use fontawesome icon/bootstrap buttons, but I couldn't make the transition from Jquery '.show()' when each (rock paper scissors) '.btn' was clicked, to using JS submit '.btn' to run the codeacademy rock paper scissors functions.

I'll start reading and tweaking; for me, as a rookie, it's a great (but arduous) learning experience.


#4

@oc2215
and where is your <head></head> definition ????


#5

I'm running the code on
code pen. The head is accessed in the hmtl settings there.

I have the following info on there:

  <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.fontawesome.com/4131e5781a.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

#6

@oc2215
As a first comment
1.
google search and Read through some
== discussions / opinions ==
codepen.io jquery problems stackoverflow.com
codepen.io bootstrap problems stackoverflow.com
2.
Some =local= js is loaded
"https://use.fontawesome.com/4131e5781a.js"


#7

@oc2215
Here a result
-click on r,p or s
-click on submit

<!DOCTYPE html>
<html>
	<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <script src="https://use.fontawesome.com/4131e5781a.js"></script> -->
      <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
h1 {
  font-family: 'Aref Ruqaa', serif;
}

.human {
  height: 120px;
  width: 250px;
}
#middle {
  height: 70px;
  width: 250px;
}
.computer {
  height: 100px;
  width: 250px;
}

#paperimg, #rockimg, #scissorsimg {
  height: 150px;
  width: 150px;
display: none;  
}

#title{position: absolute;
  z-index:3;}
#rock{position: absolute;
  z-index:0;}
#paper{position: absolute;
  z-index:1;}
#scissors{position: absolute;
  z-index:2;}

.hide {
    display: none;
}
</style>
		<title>My social web, example..</title>
 </head>
 <body>
   <div class = "well"> <h1>Rock, Paper, Scissors</h1>
      <p>Let's Play!</p>
   </div>
  
   <div class="row">
     <div class="human col-sm-4 well">
	   <div class="panel panel-default">
         <div class="panel-body" id="human">Human
		 </div>
       </div>
       <button  class="btn btn-primary"  id="rockbtn">R
	     <!-- <i class="fa fa-hand-rock-o" aria-hidden="true">R</i> -->
       </button>
 
       <button class="btn btn-danger" id="paperbtn">P
          <!-- <i class="fa fa-hand-paper-o" aria-hidden="true">P</i> -->
	   </button>

       <button class="scissors btn btn-primary" id="scissorsbtn">S
	     <!-- <i class="fa fa-hand-scissors-o" aria-hidden="true" ></i> -->
	   </button>

       <button  class="btn btn-primary" id="submitbtn">
	      Submit
	   </button>  
<!--       
<img src="x" id="rockimg" /> 
       
<img src="x" id="paperimg" />
         
<img src="x" id="scissorsimg" />
-->
   </div>
     
    
   <!--human ends -->    

    <div class="col-sm-4 well" id="middle">
      
    </div>
      <!--score board ends -->
     
    <div class="computer col-sm-4 well">
	  <div class="panel panel-default">
        <div class="panel-body" id="compChoice">Computer
	    </div>
      </div>
    </div>
	</div>
<script>
  var main = function() {
     function getComputerChoice() {
        var computerChoice = Math.random();
        if (computerChoice < 0.34) {
          computerChoice = "Rock";
        } 
	    else if(computerChoice <= 0.67) {
          computerChoice = "Paper";
        } 
	    else {
          computerChoice = "Scissors";
        }
	    $('#compChoice').text("Computer: "+computerChoice);
     }
     $('#rockbtn,#paperbtn,#scissorsbtn').click( function() {
        var humanObj = {S:"Scissors",P:"Paper",R:"Rock"};
	    $('#human').text("Human:" + humanObj[$(this).text().substr(0,1)]);
		getComputerChoice();
	 });
	 $("#submitbtn").click( function() {
        $("#middle").text("Place for result");
	 });
   }
   $(document).ready(main);
	 </script>
	</body>
</html>

#8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.