0

フォームへのユーザー入力に基づいてボックスを作成するコードを作成しました。コンストラクター関数を使用して、ボックスにこれらの値を指定します。名前、色、ID、番号。ユーザーがページ内のボックスをクリックすると、その個々のボックスの値を示すアラートボックスが表示されるようにする必要があります。これらのプロパティのほとんどを正しく表示する方法を理解するのに問題があります。

ボックスにプロパティ値を割り当て、それらをページに追加する関数は次のとおりです。

function addBox(newbox) {  
   for (var i = 0; i < newbox.number; i++) { 
   counter++;                         
   var scene = document.getElementById("scene");              
   var div = document.createElement("div"); 
   div.setAttribute("id", counter);                  
   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;           
    }                      
  }

ボックスに関する情報を表示するために私が持っている関数は次のとおりです。

function display(e) {
   var a = e.target.attributes;
   var b = e.target;
   console.log(b.name);     //shows "undefined"
   alert("id:" + "" + a[0].value); 
  }

私のアラートメッセージは正しく機能し、カウンターの値に基づいて、ボックスごとに個別の番号が表示されます。名前、色、または番号を表示するためにe.targetを機能させることができない理由がわかりません。私は初心者ですので、どんな考えでも大歓迎です。

4

3 に答える 3

2

.getAttribute()設定した属性に使用する必要があります。

function display(e) {
    var element = e.target || window.event.target;

    console.log(element.getAttribute('name'));   
}
于 2013-01-22T02:20:29.617 に答える
0

これを IE で動作させたい場合:

function display(e) {
   b = e ? e.target : window.event.srcElement,
   ret=[];
   console.log(b.getAttribute("name")); 
   // all attributes:
   for(att in b){
      ret.push(att+b[att]);
   }
   alert(ret.join("\n"));
}
于 2013-01-22T02:39:55.253 に答える