2015-10-14 7 views
1

Пытается создать простую игру ножницы для бумажной бумаги. Однако, когда я нажимаю на submit, мой CalcWinner(); получает консольную ошибку «функция не определена».Функция Javascript возвращается как undefined

Уверен, что мне не хватает чего-то легкого, любые предложения были бы очень признательны!

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Rock - Paper - Scissors</title> 
 
\t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<p>Click the button to pick rock, paper or scissors.</p> 
 

 
<input type = "text" id = "picker" /> 
 
<button onclick="calcWinner();">Make your Selection?</button> 
 

 
<!-- <input type = "submit" value="Make your Selection"/> --> 
 
<p id="demo"></p> 
 
<p id="score"></p> 
 

 
<script> 
 
$(document).ready(function(){ 
 

 
var myChoice = ""; 
 
var compChoice = ""; 
 
var myScore = 0; 
 
var compScore = 0; 
 
    
 
    
 
    function calcWinner() { 
 
    myChoice = document.getElementById("picker");  
 
    compChoice = Math.random(); 
 
    if (compChoice < 0.33) { 
 
     compChoice = "rock"; 
 
    } else if(compChoice < 0.67) { 
 
     compChoice = "paper"; 
 
    } else { 
 
     compChoice = "scissors"; 
 
    } 
 
    
 
    if (compChoice == myChoice) { 
 
     document.getElementById("demo").innerHTML = "It's a tie! You picked " + myChoice + " and the computer picked " + compChoice; 
 
    } else if (compChoice == "rock") { 
 
     if(myChoice == "scissors") { 
 
     \t compScore ++; \t 
 
      document.getElementById("demo").innerHTML = "You lose! You picked " + myChoice + " and the computer picked " + compChoice; 
 
      
 
     } else if (myChoice == "paper") { 
 
      userScore ++; 
 
      document.getElementById("demo").innerHTML = "You win! You picked " + myChoice + " and the computer picked " + compChoice; 
 
     } else if (myChoice == "paper") { 
 
     } 
 
    } else if (compChoice == "paper") { 
 
     if (myChoice == "rock") { 
 
     \t compScore ++; \t 
 
      document.getElementById("demo").innerHTML = "You lose! You picked " + myChoice + " and the computer picked " + compChoice; 
 
     } else if (myChoice == "paper") { 
 
     } else if (myChoice == "scissors") { 
 
     \t userScore ++; 
 
     document.getElementById("demo").innerHTML = "You win! You picked " + myChoice + " and the computer picked " + compChoice; 
 
     } else if (myChoice == "paper") { 
 
     } 
 
    } else if (compChoice == "scissors") { 
 
     if (myChoice == "rock") { 
 
     \t userScore ++; 
 
      document.getElementById("demo").innerHTML = "You win! You picked " + myChoice + " and the computer picked " + compChoice + " you have " + userScore; 
 
     } else if (myChoice == "paper") { 
 
     } else if (myChoice == "paper") { 
 
     \t compScore ++; \t 
 
      document.getElementById("demo").innerHTML = "You lose! You picked " + myChoice + " and the computer picked " + compChoice; 
 
     } else if (myChoice == "paper") { 
 
     } 
 

 
    } 
 
}; 
 
    
 

 

 

 

 

 

 
}); 
 
</script>

+0

Не включайте свой метод 'calcWinner' в готовую функцию. –

+0

Переведите 'calcWinner' из' ready', он будет _private_ и не может быть доступен извне – Tushar

ответ

2

Проблема заключается в том calcWinner создается в рамках закрытия, поэтому он не доступен из глобальной области видимости.

Поскольку вы используете JQuery вместо того, чтобы использовать встроенные обработчики событий с помощью JQuery, чтобы зарегистрировать обработчик щелчка на йот готовый обработчик, как показано ниже

Кроме того, необходимо прочитать значение поля ввода так myChoice = document.getElementById("picker").value; или myChoice = $("#picker").val()

$(document).ready(function() { 
 

 
    var myChoice = ""; 
 
    var compChoice = ""; 
 
    var myScore = 0; 
 
    var compScore = 0; 
 

 

 
    $('#selection').click(calcWinner); 
 
    
 
    function calcWinner() { 
 
    myChoice = document.getElementById("picker").value; 
 
    compChoice = Math.random(); 
 
    if (compChoice < 0.33) { 
 
     compChoice = "rock"; 
 
    } else if (compChoice < 0.67) { 
 
     compChoice = "paper"; 
 
    } else { 
 
     compChoice = "scissors"; 
 
    } 
 

 
    $("#demo").html(""); 
 
    if (compChoice == myChoice) { 
 
     $("#demo").html("It's a tie! You picked " + myChoice + " and the computer picked " + compChoice); 
 
    } else if (compChoice == "rock") { 
 
     if (myChoice == "scissors") { 
 
     compScore++; 
 
     $("#demo").html("You lose! You picked " + myChoice + " and the computer picked " + compChoice); 
 

 
     } else if (myChoice == "paper") { 
 
     userScore++; 
 
     $("#demo").html("You win! You picked " + myChoice + " and the computer picked " + compChoice); 
 
     } else if (myChoice == "paper") {} 
 
    } else if (compChoice == "paper") { 
 
     if (myChoice == "rock") { 
 
     compScore++; 
 
     $("#demo").html("You lose! You picked " + myChoice + " and the computer picked " + compChoice); 
 
     } else if (myChoice == "paper") {} else if (myChoice == "scissors") { 
 
     userScore++; 
 
     $("#demo").html("You win! You picked " + myChoice + " and the computer picked " + compChoice); 
 
     } else if (myChoice == "paper") {} 
 
    } else if (compChoice == "scissors") { 
 
     if (myChoice == "rock") { 
 
     userScore++; 
 
     $("#demo").html("You win! You picked " + myChoice + " and the computer picked " + compChoice + " you have " + userScore); 
 
     } else if (myChoice == "paper") {} else if (myChoice == "paper") { 
 
     compScore++; 
 
     $("#demo").html("You lose! You picked " + myChoice + " and the computer picked " + compChoice); 
 
     } else if (myChoice == "paper") {} 
 

 
    } 
 
    }; 
 
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<p>Click the button to pick rock, paper or scissors.</p> 
 

 
<input type="text" id="picker" /> 
 
<button id= "selection">Make your Selection?</button> 
 

 
<!-- <input type = "submit" value="Make your Selection"/> --> 
 
<p id="demo"></p> 
 
<p id="score"></p>

0

Ваш кал функция победитель внутри функции закрытия Jquery. Объект window не может получить к нему доступ. Вы можете либо переместить его за пределы готовой функции, либо использовать jQuery ('button'). On ('click', calcwinner);

1

Вы должны переместить calcWinner в global.Because, если он закрыт в готовой функции. Окно не может получить к нему доступ.

0
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Rock - Paper - Scissors</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script> 
// $(document).ready(function(){ 
$(function() { 
var myChoice = ""; 
var compChoice = ""; 
var myScore = 0; 
var compScore = 0; 
var userScore =0 ; 


    $("#selection").click(function(){ 

    myChoice = $("#picker").val();  
    compChoice = Math.random(); 
    if (compChoice < 0.33) { 
     compChoice = "rock"; 
    } else if(compChoice < 0.67) { 
     compChoice = "paper"; 
    } else { 
     compChoice = "scissors"; 
    } 



    if (compChoice == myChoice) { 
     document.getElementById("demo").innerHTML = "It's a tie! You picked " + myChoice + " and the computer picked " + compChoice; 
    } else if (compChoice == "rock") { 
     if(myChoice == "scissors") { 
      compScore ++; 
      document.getElementById("demo").innerHTML = "You lose! You picked " + myChoice + " and the computer picked " + compChoice; 

     } else if (myChoice == "paper") { 
      userScore ++; 
      document.getElementById("demo").innerHTML = "You win! You picked " + myChoice + " and the computer picked " + compChoice; 
     } else if (myChoice == "paper") { 
     } 
    } else if (compChoice == "paper") { 
     if (myChoice == "rock") { 
      compScore ++; 
      document.getElementById("demo").innerHTML = "You lose! You picked " + myChoice + " and the computer picked " + compChoice; 
     } else if (myChoice == "paper") { 
     } else if (myChoice == "scissors") { 
     userScore ++; 
     document.getElementById("demo").innerHTML = "You win! You picked " + myChoice + " and the computer picked " + compChoice; 
     } else if (myChoice == "paper") { 
     } 
    } else if (compChoice == "scissors") { 
     if (myChoice == "rock") { 
     userScore ++; 
      document.getElementById("demo").innerHTML = "You win! You picked " + myChoice + " and the computer picked " + compChoice + " you have " + userScore; 
     } else if (myChoice == "paper") { 
     } else if (myChoice == "paper") { 
      compScore ++; 
      document.getElementById("demo").innerHTML = "You lose! You picked " + myChoice + " and the computer picked " + compChoice; 
     } else if (myChoice == "paper") { 
     } 

    } 
}); 
    }); 
// }); 
</script> 


</head> 
<body> 
<p>Click the button to pick rock, paper or scissors.</p> 

<input type = "text" id = "picker" /> 
<button id="selection">Make your Selection?</button> 

<!-- <input type = "submit" value="Make your Selection"/> --> 
<p id="demo"></p> 
<p id="score"></p> 
</body> 
</html> 
Смежные вопросы