我基本上创建了这个游戏，根据显示的用户类型的球数在屏幕上生成随机数的球，然后在右侧，他必须按顺序输入球数并点击验证，如果他说得对，它说“正确”，否则它说“抱歉正确的数字是”然后显示数字的实际顺序。问题是，每当我点击验证，结果总是正确的，即使我没有输入任何数字，或者即使数字错误。我犯的错是什么？这里是我的代码：我会在程序的验证部分旁边放一个命令，这样你就可以更容易找到问题了。
<html>
<head>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
window.onload=draw;
var xArr=[];
var choose;
function draw(){
var canvas= document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var id;
var x;
var y;
var r;
var i;
var balls=[{"id":1,"x":85,"y":90,"r":40},{"id":2,"x":180,"y":90,"r":40},{"id":3,"x":270,"y":90,"r":40},{"id":4,"x":360,"y":90,"r":40},
{"id":5,"x":450,"y":90,"r":40},{"id":6,"x":535,"y":90,"r":40},{"id":7,"x":623,"y":90,"r":40},{"id":8,"x":710,"y":90,"r":40},
{"id":9,"x":85,"y":190,"r":40},{"id":10,"x":180,"y":190,"r":40},{"id":11,"x":270,"y":190,"r":40},{"id":12,"x":360,"y":190,"r":40},
{"id":13,"x":450,"y":190,"r":40},{"id":14,"x":535,"y":190,"r":40},{"id":15,"x":623,"y":190,"r":40},{"id":16,"x":710,"y":190,"r":40},
{"id":17,"x":85,"y":290,"r":40},{"id":18,"x":180,"y":290,"r":40},{"id":19,"x":270,"y":290,"r":40},{"id":20,"x":360,"y":290,"r":40},
{"id":21,"x":450,"y":290,"r":40},{"id":22,"x":535,"y":290,"r":40},{"id":23,"x":623,"y":290,"r":40},{"id":24,"x":710,"y":290,"r":40},
{"id":25,"x":85,"y":390,"r":40},{"id":26,"x":180,"y":390,"r":40},{"id":27,"x":270,"y":390,"r":40},{"id":28,"x":360,"y":390,"r":40},
{"id":29,"x":450,"y":390,"r":40},{"id":30,"x":535,"y":390,"r":40},{"id":31,"x":623,"y":390,"r":40},{"id":32,"x":710,"y":390,"r":40},
{"id":33,"x":85,"y":490,"r":40},{"id":34,"x":180,"y":490,"r":40},{"id":35,"x":270,"y":490,"r":40},{"id":36,"x":360,"y":490,"r":40},
{"id":37,"x":450,"y":490,"r":40},{"id":38,"x":535,"y":490,"r":40},{"id":39,"x":623,"y":490,"r":40},{"id":40,"x":710,"y":490,"r":40},
{"id":41,"x":85,"y":590,"r":40},{"id":42,"x":180,"y":590,"r":40},{"id":43,"x":270,"y":590,"r":40},{"id":44,"x":360,"y":590,"r":40},
{"id":45,"x":450,"y":590,"r":40},{"id":46,"x":535,"y":590,"r":40},{"id":47,"x":623,"y":590,"r":40},{"id":48,"x":710,"y":590,"r":40},
{"id":49,"x":85,"y":690,"r":40},{"id":50,"x":85,"y":690,"r":40}];
var texts=[];
for(i=1;i<=balls.length;i++){
texts[i]=i;
}
var x=[];
var t=[];
var xstep=0;
choose=parseFloat(prompt("enter the number of balls u want to see"));
for (i=0; i<choose; i++) {
var b = getRandomBall();
x.push(b);
ctx.fillStyle = "#800000";
ctx.strokeStyle = "#000000";
ctx.beginPath();
xstep=xstep+120;
var ystep=90;
ctx.arc(xstep, ystep, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = 'black';
ctx.fillText(b.id, xstep, ystep);
console.log(i);
$(".selected").append('<label>Enter a number: </label><input type="text" name="userNumber'+i+'" id="userNumber'+i+'"><br /><br />');
}
function getRandomBall(){
var r = Math.floor(Math.random() * balls.length);
return balls.splice(r,1)[0];
}
xArr = x;
}
draw()
</script>
<body>
<div id="leftside" width="900" height="1000" style="border: 2px solid #000000">
<canvas id="canvas" width="800" height="800" style="border: 2px solid #000000">
</canvas>
<div id="rightside" width="300" height="800" style="border 2px solid #000000; float: right; margin-right:100px;">
<form action="#" method="get" >
<div class="selected"></div>
<input type="button" id="verifyBtn" value="verify">
<hr>
</form>
the result is:
<div id="result" style="font-size: 14px"></div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){ //here is the issue
for (i=0; i<choose; i++) {
$("#verifyBtn").click(function(){
if(($('#userNumber'+i).val()==xArr[i])){
$("#result").css({color:'green'});
$("#result").text("correct");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+xArr);
}
})
}
})
</script>
</html>