JavaScript функции не работают вместе для отображения изображения

Question

Я пытаюсь получить пользовательский ввод, а затем распечатать это количество ящиков на экране, я могу получить ящики, если я не проверяю, и просто установить их на каждый раз, когда я нажимаю один, однако, как только я начинаю добавлять в флажки просто перестают порождаться.

var count = 1;

function spawnBox() {
  var container = document.getElementById("container");
  var newBox = document.createElement("div");
  newBox.className = "box";
  newBox.innerHTML = count;
  container.appendChild(newBox);
  count++
}

function checkIfCanSpawn() {
  while (count < inputNumber) {
    spawnBox();
  }
}

div.box {
  width: 10vw;
  height: 8vw;
  background: rgb(8, 144, 168);
  margin: 1vw;
  float: left;
  text-align: center;
  font-size: 5vw;
  padding-top: 1vw;
  font-family: sans-serif;
}

<label id="type in a number" name="Input a number"> Type In a number </label>
<input id="inputNum" type="number" name="inputNumber"> </input>

Answer 1

Немного подправил, чтобы это заработало.

Добавлено событие onchange для входного класса. затем вместо использования счетчика я использовал доступные, а l oop и вместо этого прошел счетчик. затем очищайте «контейнер» при каждом запуске.

function spawnBox(count) {
  // Get the container
  var container = document.getElementById("container");

  // Create a new div
  var newBox = document.createElement("div");
  newBox.className = "box";
  newBox.innerHTML = count;

  // Append it to the container
  container.appendChild(newBox);

  // Increment count
  count++
}

function checkIfCanSpawn() {

  document.getElementById("container").innerHTML = "";
  var inputNumber = document.getElementById("inputNum").value;
  var x = 1;
  while (x <= inputNumber) {
    spawnBox(x);
    x++;
  }
}

div.box {
  width: 10vw;
  height: 8vw;
  background: rgb(8, 144, 168);
  margin: 1vw;
  float: left;
  text-align: center;
  font-size: 5vw;
  padding-top: 1vw;
  font-family: sans-serif;
}

<label id="type in a number" name="Input a number"> Type In a number </label>
<input id="inputNum" type="number" name="inputNumber" onchange="checkIfCanSpawn()" />

<div id="container"></div>

https://jsfiddle.net/Lqj4dktw/

Answer 2

Добавить кнопку с click-eventHandler для вызова spawnBox ():

$(document).ready(function() {  
  $("#btn" ).click(function(){
    let inputNumber = $("#inputNum").val();
      while (count < inputNumber) {
          spawnBox();
      }
  })
})

Она является рабочей скрипкой