如何使用事件对象显示有关DOM元素的信息

Question

I want to be able to click on a box (the boxes are created through code, and receive values from a form) in the webpage and display information about the box. I am working on a display() function that uses an event object and an alert to display information about the box. So far, I've had multiple odd failures in my attempt to do this, which leads me to believe that I'm not accessing object attributes correctly. I'm a beginner, so this could be really obvious, but thanks for the help.

constructor function:

function Box (counter, name, color, number, coordinates) {  
    this.counter = counter;
    this.name = name;
    this.color = color;
    this.number = number;
    this.coordinates = coordinates; 
}

Global variables:

var boxes = []; 
var counter = 0;

Init function:

function init() {     
    var generateButton = document.getElementById("generateButton");
    generateButton.onclick = getBoxValues;

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

Function that gets values from the form:

function getBoxValues() {
    var nameInput = document.getElementById("name");  
    var name = nameInput.value; 

    var numbersArray = dataForm.elements.amount;
    for (var i = 0; i < numbersArray.length; i++) {
        if (numbersArray[i].checked) {
            number = numbersArray[i].value;
        }
    }  

    var colorSelect = document.getElementById("color");  
    var colorOption = colorSelect.options[colorSelect.selectedIndex];  
    var color = colorOption.value;                       

    if (name == null || name == "") {                    
        alert("Please enter a name for your box");
        return;
    } else {
        var newbox = new Box(counter, name, color, number, "coordinates");  
        boxes.push(newbox);
        counter++;
        /*for(m = 0; m < boxes.length; m++) {
            counter.newbox = boxes[m];
        }*/
    }

    addBox(newbox);

    var data = document.getElementById("dataForm");               
    data.reset();
}

function that assigns attributes to the boxes:

function addBox(newbox) {  
    for (var i = 0; i < newbox.number; i++) {                            
        var scene = document.getElementById("scene");              
        var div = document.createElement("div");                  
        div.className += " " + "box"; 
        div.innerHTML += newbox.name; 
        div.style.backgroundColor = newbox.color; 
        var x = Math.floor(Math.random() * (scene.offsetWidth-101));
        var y = Math.floor(Math.random() * (scene.offsetHeight-101));
        div.style.left = x + "px";
        div.style.top = y + "px"; 
        scene.appendChild(div); 
        div.onclick = display; 
        //console.log(newbox); 
        //shows all of the property values of newbox in the console
        //console.log(div); shows that it is an object in the console  
        //console.log(div.hasAttribute(number));  says false               
    }                  
}

display function:

function display(e) {
    // alert(e.target);  says its an html object
    //alert(e.target.className); works - says "box"
    //alert(e.target.hasAttribute(name)); says false
}

I've included some of the things i've found in comments.

Answer 1

The event object only gives you the name not a reference to the element. So... a couple of things.

First if you want to be browser agnostic you want something like (e.srcElement is for IE):

    var x = e.target||e.srcElement;

Then get a reference to the element and do what you want:

    var refToElement = document.getElementById(x.id);