JavaScript函数不一起工作以显示图像

我正在尝试获取用户输入，然后在屏幕上打印该数量的框，如果我不进行检查，我可以让框生成，只要在单击一个框时将其设置为生成，但是，一旦我开始添加检查，框就停止生成

var计数=1；
函数spawnBox（）{
var container=document.getElementById（“容器”）；
var newBox=document.createElement（“div”）；
newBox.className=“box”；
newBox.innerHTML=计数；
容器.附件（新箱）；
计数++
}
函数checkIfCanSpawn（）{
while（计数<输入编号）{
产卵盒（）；
}
}

div.box{
宽度：10vw；
高度：8vw；
背景：rgb（8144168）；
利润率：1vw；
浮动：左；
文本对齐：居中；
字体大小：5vw；
垫面：1vw；
字体系列：无衬线；
}

键入一个数字

稍微调整了一下以使其正常工作

在输入类上添加了onchange事件。 然后，我没有使用计数，而是使用了可用的while循环并传递了计数。 然后每次运行时清除“容器”

函数产卵盒（计数）{
//拿容器
var container=document.getElementById（“容器”）；
//创建一个新的div
var newBox=document.createElement（“div”）；
newBox.className=“box”；
newBox.innerHTML=计数；
//将其附加到容器中
容器.附件（新箱）；
//增量计数
计数++
}
函数checkIfCanSpawn（）{
document.getElementById（“容器”）.innerHTML=“”；
var inputNumber=document.getElementById（“inputNum”）.value；
var x=1；
而（x添加一个带有click eventHandler的按钮来调用spawnBox（）：

$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
让inputNumber=$（“#inputNum”）.val（）；
while（计数<输入编号）{
产卵盒（）；
}
})
})

Her是一个
inputNumber
只是输入元素的名称。您必须读取输入的值。此外，
checkIfCanSpawn
函数缺少右括号。您尝试获取id为“container”的元素，但没有这样的元素。您在哪里调用
checkIfCanSpawn（）
from？在哪里定义了
inputnumber
呢？确实是我的错误
$(document).ready(function() {  
  $("#btn" ).click(function(){
    let inputNumber = $("#inputNum").val();
      while (count < inputNumber) {
          spawnBox();
      }
  })
})