0

Web ページのボックス (ボックスはコードで作成され、フォームから値を受け取る) をクリックして、ボックスに関する情報を表示できるようにしたいと考えています。イベント オブジェクトとアラートを使用してボックスに関する情報を表示する 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
}

コメントで見つけたもののいくつかを含めました。

4

1 に答える 1

0

イベントオブジェクトは、要素への参照ではなく、名前のみを提供します。だから...いくつかのこと。

まず、ブラウザに依存しないようにしたい場合は、次のようなものが必要です（e.srcElementはIE用です）。

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

次に、要素への参照を取得し、必要なことを実行します。

    var refToElement = document.getElementById(x.id);
于 2013-01-18T19:11:45.700 に答える