Question

尝试创建一个简单的石头剪刀游戏。但是，当我点击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>

Answer 1

问题是calcWinner是在闭包范围内创建的，因此无法从全局范围访问它。

由于您使用的是jQuery而不是使用内联事件处理程序，因此使用jQuery在dom ready处理程序中注册click处理程序，如下所示

您还需要阅读输入字段的值，以便myChoice = document.getElementById("picker").value;或myChoice = $("#picker").val()

＆＃13;

$(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") {}

    }
  };
});

＆＃13;

<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>

＆＃13;

Answer 2

您应该将calcWinner移动到global.Because因为它在就绪函数中是私有的。窗口无法访问它。

Answer 3

你的cal获胜者函数在jQuery闭包函数中。窗口对象无法访问它。你可以将它移到ready函数之外或使用jQuery（'button'）。on（'click'，calcwinner）;

Javascript函数以未定义

3 个答案: