我基本上制作了一个程序，根据用户想要在屏幕上显示多少个球来生成随机球数，然后用户必须按顺序键入球数，如果他猜对了，他就赢了或者其他他输了。但是，jQuery对我来说有点混乱。我究竟如何调用x[i]变量及其赋值给它的程序底部的jQuery？哦，并且，球和输入条的数量应该根据用户键入的最大球数显示，但是我真的可以使用带有html和jQuery的数组吗？因此，如果用户输入3，只显示3个输入，或者当他输入6时，只显示6个输入？感谢
<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>
答案 0 :(得分：0)
我无法真正为您查看整个代码。尝试尽可能具体和通用，以便其他人也可以使用您的问题。至于jquery，这是你获取输入值并将其存储到变量x的方法。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(function(){
var x = $('#userNumber').val();
alert(x);
});
</script>
</head>
<body>
<input type="text" name="userNumber" id="userNumber" value="5">
</form>
<body>
</html>
我输入了$（function（）{}）; （https://api.jquery.com/ready/）因为我希望DOM准备就绪，否则输入未定义。
答案 1 :(得分：0)
Firstable - 您的x variable无法在jQuery部分中覆盖。
在你的代码中，它是一个局部变量。
您的代码非常混乱，但是first and dirty修复了您可以做的事情并且我想到的是创建一个全局变量并在绘制函数结束时将其值设置为x
window.onload=draw;
var xArr;
然后在绘制函数结束时
xArr = x;
之后，您应该将jQuery代码中的所有“x”替换为xArr。
快速修复代码。 此外，快速修复以获得正确的球数和用户输入验证。
看起来应该是这样的
window.onload=draw;
var xArr
var BallsNumber = 0;
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=[];
for(i=0;i<balls.length;i++){
texts[i]=i;
}
var x=[];
var choose;
while(true){
choose=parseFloat(prompt("enter the number of balls u want to see (less than 20)"));
if(choose < 20){
break;
}else{
alert("Please enter a valid number");
}
}
while(BallsNumber<choose){
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);
BallsNumber++;
}
}
}
}
xArr = x;
}
draw()
$(document).ready(function(){
$("#verifyBtn").click(function(){
if($("#userNumber").val()==xArr[0]){
$("#result").css({color:'green'});
$("#result").text("correct");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ xArr);
}
})
$("#verifyBtn2").click(function(){
if($("#userNumber2").val()==xArr[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()==xArr[2]){
$("#result").css({color:'green'});
$("#result").text("yeah");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ xArr);
}
})
$("#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 "+ xArr[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 "+ xArr[4]);
}
})
$("#verifyBtn6").click(function(){
if($("#userNumber6").val()==xArr[5]){
$("#result").css({color:'green'});
$("#result").text("yeah");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ xArr[5]);
}
})
})
你有一个全局变量BallsNumber，所以你可以找到一个解决方案来创建一个循环并创建正确数量的“验证”输入