[英]how to use an event object to dispaly information about a DOM element
我希望能夠在網頁中單擊一個框(框是通過代碼創建的,並從表單接收值)並顯示有關該框的信息。 我正在使用一個事件對象和一個警報來顯示有關該框的信息的display()函數。 到目前為止,我在嘗試執行此操作時遇到了許多奇怪的失敗,這使我相信我沒有正確訪問對象屬性。 我是一個初學者,所以這可能確實很明顯,但是感謝您的幫助。
構造函數:
function Box (counter, name, color, number, coordinates) {
this.counter = counter;
this.name = name;
this.color = color;
this.number = number;
this.coordinates = coordinates;
}
全局變量:
var boxes = [];
var counter = 0;
初始化功能:
function init() {
var generateButton = document.getElementById("generateButton");
generateButton.onclick = getBoxValues;
var clearButton = document.getElementById("clearButton");
clearButton.onclick = clear;
}
從表單獲取值的函數:
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 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
}
}
顯示功能:
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
}
我已經在評論中找到了一些發現。
事件對象僅為您提供名稱,而不是對元素的引用。 所以...幾件事。
首先,如果您想與瀏覽器無關,則需要類似的東西(e.srcElement用於IE):
var x = e.target||e.srcElement;
然后獲取對該元素的引用並執行所需操作:
var refToElement = document.getElementById(x.id);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.