2

私はこれを理解しようと長い間このコードを見てきましたが、運がありません。この問題は、パラメータboxIdに値を割り当てたいということです。Webページのボックスをクリックすると、そのIDを表示するアラートが表示されます。私は多くのことを試しましたが、何もうまくいかないようです。私は初心者なので、この時点でどうしたらいいかわからないことがあるに違いないと思います。

コンストラクター関数：

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

グローバル変数：

  var boxes = []; 
  var counter = 0; 
  var boxId = 0;

init関数：

  window.onload = init;

  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(boxId, name, color, number, "coordinates");  
    boxes.push(newbox);
    counter++;
    var boxId = counter;
    }

    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;                         
    }                  
  }

ボックスがクリックされたときにアラートを表示する機能：

  function display(e) {
  var a = e.target;
  alert(a.counter);
  }

ボックスをクリアする機能： 

function clear() {
  var elems = document.getElementsByClassName("box");
  for ( k = elems.length - 1; k >= 0; k--) {
   var parent = elems[k].parentNode;
   parent.removeChild(elems[k]);
  }
  }

他のすべての機能は問題なく機能します。クリックすると「undefined」と表示されるID、またはコンソールログに「0」と表示されるカウンターが表示され続けます。

4

2 に答える 2

1

このようにできます。

まず、 addBox() で、次のように boxId をタグの属性として埋め込みます。

div.setAttribute('data-boxId', newbox.boxId);

次に、display() でそれを取得できます。

alert(e.target.getAttribute('data-boxId'));

このアプローチを好まない場合はお知らせください。別の方法を投稿します（閉鎖のもの）。

編集: jsfiddle の例を追加http://jsfiddle.net/runtarm/8FJpU/

于 2013-01-17T20:35:01.440 に答える
0

もう一回試してみる。おそらくあなたが変更した場合：

var boxId = counter;

に

boxId = counter;

次に、関数で定義されたものではなく、外側のスコープからの boxId を使用します。getBoxValues()

于 2013-01-17T20:00:37.227 に答える