-3
我基本上制作了一个程序，根据用户想要在屏幕上显示多少球来生成随机球数，然后用户必须按顺序键入球数，如果他猜对了，他会赢，否则他输。但是，jQuery对我来说有点困惑。我如何确切地将x[i]变量的值分配给程序底部的jQuery？噢，还有，球和输入栏的数量应该根据用户输入的最大球数来显示，但是真的有可能使用html和jQuery数组吗？因此，如果用户键入3，只显示3个输入，或者当他键入6时，只显示6个？谢谢如何在jQuery中调用javascript变量？
<html>
<head>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
window.onload=draw;
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":450,"y":190,"r":40},{"id":18,"x":535,"y":190,"r":40},{"id":19,"x":623,"y":190,"r":40},{"id":20,"x":710,"y":190,"r":40}];
var texts=[];
var i;
for(i=0;i<balls.length;i++){
texts[i]=i;
}
var choose;
var x=[];
choose=parseFloat(prompt("enter the number of balls u want to see"));
for (i=0; i<=choose; i++) {
x[i]=Math.floor((Math.random() * 19) + 1);
for (var k=0; k<balls.length; k++) {
var b=balls[k];
if(b.id==x[i]){ /*here is the issue*/
ctx.fillStyle="#800000";
ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.arc(b.x,b.y,b.r,0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = 'black';
ctx.fillText(b.id, b.x, b.y);
}
}
}
}
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;">
<<form name="guessForm" id="guessForm" method="POST" action="">
<label>Enter a number: </label>
<input type="text" name="userNumber" id="userNumber">
<input type="button" id="verifyBtn" value="verify">
</form>
<form name="guessForm" id="guessForm2" method="POST" action="">
<label>Enter a number: </label>
<input type="text" name="userNumber2" id="userNumber2">
<input type="button" id="verifyBtn2" value="verify">
</form>
<form name="guessForm" id="guessForm3" method="POST" action="">
<label>Enter a number: </label>
<input type="text" name="userNumber3" id="userNumber3">
<input type="button" id="verifyBtn3" value="verify">
</form>
<form name="guessForm" id="guessForm4" method="POST" action="">
<label>Enter a number: </label>
<input type="text" name="userNumber4" id="userNumber4">
<input type="button" id="verifyBtn4" value="verify">
</form>
<form name="guessForm" id="guessForm5" method="POST" action="">
<label>Enter a number: </label>
<input type="text" name="userNumber5" id="userNumber5">
<input type="button" id="verifyBtn5" value="verify">
</form>
<form name="guessForm" id="guessForm6" method="POST" action="">
<label>Enter a number: </label>
<input type="text" name="userNumber6" id="userNumber6">
<input type="button" id="verifyBtn6" value="verify">
</form>
<hr>
the result is:
<div id="result" style="font-size: 14px"></div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#verifyBtn").click(function(){
if($("#userNumber").val()==x[0]){
$("#result").css({color:'green'});
$("#result").text("correct");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ x);
}
})
$("#verifyBtn2").click(function(){
if($("#userNumber2").val()==x[1]){
$("#result").css({color:'green'});
$("#result").text("yeah");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ systemNumber);
}
})
$("#verifyBtn3").click(function(){
if($("#userNumber3").val()==x[2]){
$("#result").css({color:'green'});
$("#result").text("yeah");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ x);
}
})
$("#verifyBtn4").click(function(){
if($("#userNumber4").val()==x[3]){
$("#result").css({color:'green'});
$("#result").text("yeah");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ x[3]);
}
})
$("#verifyBtn5").click(function(){
if($("#userNumber5").val()==x[4]){
$("#result").css({color:'green'});
$("#result").text("yeah");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ x[4]);
}
})
$("#verifyBtn6").click(function(){
if($("#userNumber6").val()==x[5]){
$("#result").css({color:'green'});
$("#result").text("yeah");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ x[5]);
}
})
})
</script>
</html>
小旁注输入正确的数字：' var i'被声明两次。 –
Firstable - 你的'x变量'不能在jQuery部分实现。 – mamosek