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

Javascript创建多个div元素onclick

1 个答案: