试图创建一个简单的剪刀石头布游戏。但是，当我单击submit时，我的CalcWinner();出现控制台错误“功能未定义”。
我确定我缺少一些简单的东西，任何建议将不胜感激！
<!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>
</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") {
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>最佳答案
问题是calcWinner是在闭包范围内创建的，因此无法从全局范围访问。
由于您使用的是jQuery而不是嵌入式事件处理程序，因此请使用jQuery在dom就绪处理程序中注册点击处理程序，如下所示
另外，您需要读取输入字段的值，因此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>