用Javascript創建多個div元素onclick

Question

我需要這個應用程式的協助。 我希望用戶選擇一個名稱，顏色和數字。 提交表單后，將生成具有所選顏色和數字的框。 可以添加更多的盒子，並且不會刪除原稿。 每個盒子都有隨機的位置和唯一的ID。 這是我的努力： http : //jsfiddle.net/christopherpl/gnVj6/

//Invoke functions only after page has fully loaded
window.onload = init;

//Create an array that will be populated by the user generated boxes
var boxes = [];

//Create a global counter variable that keeps track of the number of 
//boxes generated
var counter = 0;

//Create a Box constructor function with parameters, to create box objects
//for each box that's generated
function Box(id, name, color, x, y) {
this.id = id;
this.name = name;
this.color = color;
this.x = x;
this.y = y;
}

//Set up the onclick event handler for the generate button input
function init() {
var generateButton = document.getElementById("generateButton");
generateButton.onclick = generate;

var clearButton = document.getElementById("clearButton");
clearButton.onclick = clear;
}

//Get boxes' name from user
function generate() {
var data = document.forms.data;
var textInput = document.getElementById("name");
var name = textInput.value;
if (name == null || name == "") {
alert("Please give your Amazing Box a name");
return;
}

//Get color option from user
var colorSelect = document.getElementById("color");
var colorOption = colorSelect.options[colorSelect.selectedIndex];
var color = colorOption.value;
if (!color) {
alert("Pick a color");
return;
}

//Get number of boxes to be generated from user 
var amountArray = data.elements.amount;
for (i = 0; i < amountArray.length; i++) {
if (amountArray[i].checked) {

//Create and append the new <div> element
var div = document.createElement("div");

//Randomly position each <div> element
var x = Math.floor(Math.random() * (scene.offsetWidth-101));
var y = Math.floor(Math.random() * (scene.offsetHeight-101));

//Give each <div> element a unique id
var newId = div;
newId = counter++;
id = newId;

//Add the style, including the background color selected
//by the user.
div.style.left = x + "px";
div.style.top = y + "px";
div.style.backgroundColor = color;    
div.setAttribute("class", "box");

scene.appendChild(div);
div.innerHTML = "Box of " + name + "<br />(click me)";

//Create an onclick event displaying the 
//details of each box generated
div.onclick = function() {
alert("You clicked on a box with id " + id + 
", named Box of " + name + ", whose color is " + color + 
" at position " + div.style.top + ", " + div.style.left)
}

//Form reset
data = document.getElementById("data");
data.reset();
}
}
}

//Clear the boxes from scene div            
function clear() {
var sceneDivs = document.querySelectorAll("div#scene div");
for (var i = 0; i < sceneDivs.length; i++) {
var scene = document.getElementById("scene");
var cutList = document.getElementsByTagName("div")[1];
scene.removeChild(cutList);
}
} 

Answer 1

在您的代碼中，執行以下循環時：

for (i = 0; i < amountArray.length; i++) {
    if (amountArray[i].checked) {
        /* make the div */
    }
}

您總是只制造一個盒子。 您需要做的是第二個循環，使用單選按鈕的值作為循環的長度。 就像是：

var totalBoxes = 0;
for (i = 0; i < amountArray.length; i++) {
    if (amountArray[i].checked) {
        totalBoxes = amountArray[i].value;
    }
}

for (i = 0; i < totalBoxes; i++) {
    /* make the div */
}

這樣，如果用戶選中了5個框，您將獲得5個框，依此類推。