javascript - 用Javascript创建多个div元素onclick

我需要这个应用程式的协助。我希望用户选择一个名称，颜色和数字。提交表单后，将生成具有所选颜色和数字的框。可以添加更多的盒子，并且不会删除原稿。每个盒子都有随机的位置和唯一的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);
}
}

最佳答案

在您的代码中，执行以下循环时：

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个框，依此类推。

关于javascript - 用Javascript创建多个div元素onclick，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10927975/