Javascript shows warning undefined

Question

Javascript shows warning undefined

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I'm not very proficient with javascript so I decided to do an online course from scratch and they put me as an exercise to make a paper or scissors stone game, so I did it but I wanted to add html so the user could insert the option of your preference and the variable travels well, is received by javascript and interpreted, if I ask you to throw me the results through a console.log it does it without problems but if I decide to change the console.log of the function play () by an alert, the alert on the contrary only throws me undefined. I would like to be able to show the result of the game or the play () function in html either through an alert or a text. Next 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>

javascript html

asked by Luis Alfredo Serrano Díaz 11.11.2018 в 10:53

source

2 answers

1

Well the error is simple you only have to call the functions as they are and not inside console.log

Currently doing this

console.log (determineWinner (userInput, computerChoice));

This should be like this

determineWinner (userInput, computerChoice);

and this

console.log (play ());

should look like this

play ();

Here the corrected 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);
  determineWinner(userInput, computerChoice);
  
}

 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>

Now I explain because the undefined good those functions has no return value is empty so this value is undefined and as you ask it to print in cosola 2 functions that do not return values then it comes out 2 times undefined

answered by 11.11.2018 в 11:19

speed problem with owl-carousel boostrap instantiate objects

score 2 · Accepted Answer

Based on your situation here as it might be, try to keep your code as close as possible to yours, but it could be improved.

<!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){
    return'Empate';
  }else if(userInput==='piedra' && computerChoice==='papel'){
    return'Gana la computadora';
  }else if(userInput==='papel' && computerChoice==='piedra'){
  	return'Gana el usuario';
	}else if(userInput==='papel' && computerChoice==='tijeras'){
  	return'Gana la computadora';
  }else if(userInput==='tijeras' && computerChoice==='papel'){
  	return'Gana el usuario';
  }else if(userInput==='tijeras' && computerChoice==='piedra'){
  	return'Gana la computadora';
  }else if(userInput==='piedra' && computerChoice==='tijeras'){
  	return'Gana el usuario';
  }else if(userInput==='bomba'){
    return'Gana el usuario con trampa';
  }else{
    return'No computado';
  }
}

function jugar(modo){
	var resultados = 'Computador: ' + computerChoice;
    resultados+='\nUsuario: ' + userInput;
    resultados+='\n'+determineWinner(userInput, computerChoice);
       
  	switch (modo){
    	case 'consola':
        	console.log(resultados);
        break;    
        case 'alerta':
        	alert(resultados);
        break;
    }
    
}

 jugar('alerta');
  
}
</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>