Javascript 韩元'；t从HTML输入元素中提取值绘制动画

我想用落球来模拟物理。为了获得更多的乐趣，我想让用户能够输入他的落球半径和计数值。若你们想在浏览器上运行这段代码，你们可以点击“创建”按钮来显示带有默认值的动画，这样就可以了。当我在html输入元素中输入balls count时，它会识别该计数并执行代码，然后显示动画。当我在html输入元素中输入半径值时，画布上不会显示任何内容。我觉得这个问题很奇怪。我已经尝试过重命名变量和元素id名称。如果有人能帮助我，我将不胜感激

名为index.html的html文件

const canvas=document.getElementById（'ball-platform'）；
const createBtn=document.getElementById（'createAnimation'）；
const W=画布宽度；
常数H=画布高度；
const ctx=canvas.getContext（'2d'）；
恒重力=0.15；
常数摩擦=0.9；
让球=[]；
函数填充圆（x0，y0，bRadius，颜色）{
让圆={
x:x0，
y:y0，
颜色：彩色
};
设xVel=5，
yVel=1；
this.movement=（）=>{
如果（数学圆（圆x+bRadius+xVel）>W | |数学圆（圆x-bRadius+xVel）<0）{
xVel=-xVel*摩擦力；
yVel*=摩擦力；
}否则如果（数学圆（圆y+bRadius+yVel）>H）{
yVel=-yVel*摩擦力；
xVel*=摩擦力；
}否则{
yVel+=重力；
}
圆x+=xVel；
圆y+=yVel；
}
this.draw=（）=>{
ctx.beginPath（）；
ctx.fillStyle=circle.color；
ctx.椭圆（圆.x，圆.y，bRadius，bRadius，-90*Math.PI/180，360*Math.PI/180，假）；
ctx.fill（）；
ctx.stroke（）；
}
}
createBtn.addEventListener（'mousedown'，（）=>{
球=[]；
设bRadius=document.getElementById（'bRadius'）.value；
let count=document.getElementById（'count'）.value；
如果（bRadius==“”| | bRadius我认为您需要将输入值转换为数字


const canvas=document.getElementById（'ball-platform'）；
const createBtn=document.getElementById（'createAnimation'）；
const W=画布宽度；
常数H=画布高度；
const ctx=canvas.getContext（'2d'）；
恒重力=0.15；
常数摩擦=0.9；
让球=[]；
函数填充圆（x0，y0，bRadius，颜色）{
让圆={
x:x0，
y:y0，
颜色：彩色
};
设xVel=5，
yVel=1；
this.movement=（）=>{
如果（数学圆（圆x+bRadius+xVel）>W | |数学圆（圆x-bRadius+xVel）<0）{
xVel=-xVel*摩擦力；
yVel*=摩擦力；
}否则如果（数学圆（圆y+bRadius+yVel）>H）{
yVel=-yVel*摩擦力；
xVel*=摩擦力；
}否则{
yVel+=重力；
}
圆x+=xVel；
圆y+=yVel；
}
this.draw=（）=>{
ctx.beginPath（）；
ctx.fillStyle=circle.color；
ctx.椭圆（圆.x，圆.y，bRadius，bRadius，-90*Math.PI/180，360*Math.PI/180，假）；
ctx.fill（）；
ctx.stroke（）；
}
}
createBtn.addEventListener（'mousedown'，（）=>{
球=[]；
设bRadius=parseInt（document.getElementById（'bRadius'）.value）；
let count=parseInt（document.getElementById（'count'）.value）；
如果（bRadius==“”| | bRadius我认为您需要将输入值转换为数字


const canvas=document.getElementById（'ball-platform'）；
const createBtn=document.getElementById（'createAnimation'）；
const W=画布宽度；
常数H=画布高度；
const ctx=canvas.getContext（'2d'）；
恒重力=0.15；
常数摩擦=0.9；
让球=[]；
函数填充圆（x0，y0，bRadius，颜色）{
让圆={
x:x0，
y:y0，
颜色：彩色
};
设xVel=5，
yVel=1；
this.movement=（）=>{
如果（数学圆（圆x+bRadius+xVel）>W | |数学圆（圆x-bRadius+xVel）<0）{
xVel=-xVel*摩擦力；
yVel*=摩擦力；
}否则如果（数学圆（圆y+bRadius+yVel）>H）{
yVel=-yVel*摩擦力；
xVel*=摩擦力；
}否则{
yVel+=重力；
}
圆x+=xVel；
圆y+=yVel；
}
this.draw=（）=>{
ctx.beginPath（）；
ctx.fillStyle=circle.color；
ctx.椭圆（圆.x，圆.y，bRadius，bRadius，-90*Math.PI/180，360*Math.PI/180，假）；
ctx.fill（）；
ctx.stroke（）；
}
}
createBtn.addEventListener（'mousedown'，（）=>{
球=[]；
设bRadius=parseInt（document.getElementById（'bRadius'）.value）；
let count=parseInt（document.getElementById（'count'）.value）；
如果（bRadius==“”| | bRadius谁是
animation（）
中的
requestAnimationFrame
？@MaraBlack@ToxicBowl，你能澄清问题是什么吗？根据你的描述，当你刚刚输入一个新半径时，你似乎期待一个新球出现，但你的JS代码显然在你点击“创建”之前不会做任何事情按钮。谁是来自
animation（）
的
requestAnimationFrame
？@MaraBlack@ToxicBowl您能否澄清问题所在。根据您的描述，您似乎希望在输入新半径时出现一个新球，但在单击“创建”之前，JS代码显然不会做任何事情是的，将输入值转换为数字解决了问题，非常感谢！是的，将输入值转换为数字解决了问题，非常感谢！