0

このアプリについて助けが必要です。ユーザーに名前、色、番号を選択してもらいたい。フォームが送信されると、選択した色と数のボックスが生成されます。さらにボックスを追加でき、オリジナルは消去されません。各ボックスには、ランダムな配置と一意の 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);
}
}
4

1 に答える 1

0

コードで、このループを実行すると:

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

あなたはいつもただ一つの箱を作っています。必要なのは、ラジオ ボタンの値をループの長さとして使用する 2 番目のループです。何かのようなもの：

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 つのボックスを取得できます。

于 2012-06-07T09:27:09.060 に答える