I'm not very skilled with javascript so I decided to do an online course from scratch and they gave me an exercise to play a game of rock, paper or scissors, so I did it but I wanted to add html so that the user could insert the option of their preference and the variable travels well, it is received by javascript and interpreted, if I ask it to return the results to me through a console.log it does so without problems but if I decide to change the console.log of the play() function for an alert, the alert, on the other hand, only throws me undefined. I would like to be able to display the result of the game or the play() function in html either through an alert or text. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS NAME</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
var userInput = null;
function sub(){
userInput = document.getElementsByName("prod")[0].value;
userInput = userInput.toLowerCase();
function getComputerChoice(){
var randomNumber = Math.floor(Math.random() * 3);
//console.log(randomNumber);
switch(randomNumber){
case 0:
return 'piedra';
case 1:
return 'papel';
case 2:
return 'tijeras';
default:
return 'error';
}
}
var computerChoice = getComputerChoice();
/*console.log('Computadoraasd: ' + computerChoice);
console.log('Usuarioasd: ' + userInput);*/
function determineWinner(){
if(userInput === computerChoice){
console.log('Empate');
}else if(userInput==='piedra' && computerChoice==='papel'){
console.log('Gana la computadora');
}else if(userInput==='papel' && computerChoice==='piedra'){
console.log('Gana el usuario');
}else if(userInput==='papel' && computerChoice==='tijeras'){
console.log('Gana la computadora');
}else if(userInput==='tijeras' && computerChoice==='papel'){
console.log('Gana el usuario');
}else if(userInput==='tijeras' && computerChoice==='piedra'){
console.log('Gana la computadora');
}else if(userInput==='piedra' && computerChoice==='tijeras'){
console.log('Gana el usuario');
}else if(userInput==='bomba'){
console.log('Gana el usuario con trampa');
}else{
console.log('No computado');
}
}
function jugar(){
console.log('Computador: ' + computerChoice);
console.log('Usuario: ' + userInput);
console.log(determineWinner(userInput, computerChoice));
}
console.log(jugar());
}
</script>
</head>
<body>
<h2>Ejila su opción</h2>
<form name="form" action="" method="get">
<input type="text" name="prod">
</form>
<button onclick="sub()">enviar</button>
</body>
</html>
Based on your situation here how could it be I tried to keep your code as close to yours but it could be improved
Well the error is simple, you only have to call the functions as they are and not inside the console.log
is currently doing this
this should stay like this
and that
It should look like this
Here the corrected code
Now I will explain to you why the undefined ones, well, those functions do not have any return value, it is empty, which is why said value is undefined, and how you ask it to print in cosola 2 functions that do not return values, so it comes out 2 times undefined