javascript - 使用 javascript 方法向页面添加框

Question

我这里有一个对象构造函数:

function Box (id, name, color, number, coordinates) {  
   this.id = id;
   this.name = name;
   this.color = color;
   this.number = number;
   this.coordinates = coordinates;

   this.add = function(howMany) {
   }
  }

我在这里有一个函数的一部分，我可以在其中获取用户使用单选按钮选择的数值(5,10 或 15)。

  function getBoxValues() {
   var nameInput = document.getElementById("name");  
   var name = nameInput.value; 

   var numbersArray = dataForm.elements.amount;
   for (var i = 0; i < numbersArray.length; i++) {
   if (numbersArray[i].checked) {
    number = numbersArray[i].value;

   if (name == null || name == "") {                    
     alert("Please enter a name for your box");
     return;
   }
   else {
    var newbox = new Box("id", name, color, number, "coordinates");  
    boxes.push(newbox);                                       
    addBox(newbox);                                           

   var data = document.getElementById("dataForm");               
    data.reset();
   }

后来，我用这个函数向页面添加了框:

  function addBox(newbox) {                                   
   var scene = document.getElementById("scene");              
   var div = document.createElement("div");                   
   div.innerHTML += newbox.name; 
   var x = Math.floor(Math.random() * (scene.offsetWidth-101));
   var y = Math.floor(Math.random() * (scene.offsetHeight-101));
   div.style.left = x + "px";
   div.style.top = y + "px";                        
   scene.appendChild(div);
   newbox.add(number);   
   for (var i = 0; i < howMany; i++) {
   console.log("added"); 
    addBox(newbox);
    }                          
  }

我的问题是我想向网页添加与用户使用单选按钮选择的相同数量的框。到目前为止，我的控制台日志告诉我“添加”了“number”值循环的次数。但是，我不知道如何更改我的代码，以便为数字值创建新框。我是这方面的初学者，因此对于任何困惑我提前表示歉意。将不胜感激任何帮助。

Answer 1

function addBoxes () {
    var i;

    for (i=0; i < number; i += 1) {
        // create box
        addBox(newBox);
    }
}