Menu
//Invoke functions only after page has fully loaded
//The box id needs to start at zero
//increment to what radio button clicked
window.onload = init;
var boxes = [];
var counter = 0;
function Box(id, name, color, x, y) {
this.id = id;
this.name = name;
this.color = color;
this.x = x;
this.y = y;
}
function init() {
var generateButton = document.getElementById(“generateButton”);
generateButton.onclick = generate;
var clearButton = document.getElementById(“clearButton”);
clearButton.onclick = clear;
}
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;
}
var colorSelect = document.getElementById(“color”);
var colorOption = colorSelect.options[colorSelect.selectedIndex];
var color = colorOption.value;
if (!color) {
alert(“Pick a color”);
return;
}
// Get count of boxes to create
var boxCount = 0;
var radioButtons = document.getElementsByName(“amount”);
for(iRadio = 0; iRadio < radioButtons.length; iRadio++)
{
if(radioButtons[iRadio].checked)
{
boxCount = radioButtons[iRadio].value;
}
}
if(boxCount == null || boxCount == 0)
{
alert(“Select an amount of boxes to create”);
return;
}
// Create boxes
for (i = 0; i < boxCount; i++) {
var scene = document.getElementById(“scene”);
var x = Math.floor(Math.random() * (scene.offsetWidth-101));
var y = Math.floor(Math.random() * (scene.offsetHeight-101));
boxes.push(new Object());
var div = document.createElement(“div”);
div.id = “box” + i;
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)”;
div.onclick = function() {
alert(“You clicked on a box with id ” + div.id +
“, named Box of ” + name + “, whose color is ” + color +
” at position ” + div.style.top + “, ” + div.style.left);
}
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);
}
}