不能追加兒童單擊元素

Question

我試圖將div附加到元素時單擊但是當我使用.appendChild（div）時，我試圖附加到的元素是未定義的。我很困惑，因爲它明顯在DOM中，因爲我能夠檢測到它的點擊，我只是不能附加到它。

var pcells = document.getElementsByClassName('priority-cell'); 

for (var i=0; i < pcells.length; i++) { 
    pcells[i].onclick = function() { 
    var div = document.createElement('div'); 
     div.style.backgroundColor = "red"; 
     div.style.height = "10px"; 
     div.style.width = "10px"; 

     pcells[i].appendChild(div); 
    }; 
} 

Answer 1

您有一個範圍界定問題。您需要將事件詳細信息傳遞到您的處理程序，並使用目標屬性來確定哪個單元被點擊。

var pcells = document.getElementsByClassName('priority-cell'); 

for (var i=0; i < pcells.length; i++) { 
    pcells[i].onclick = function (e) { 
    var div = document.createElement('div'); 
     div.style.backgroundColor = "red"; 
     div.style.height = "10px"; 
     div.style.width = "10px"; 

     e.target.appendChild(div); 
    }; 
} 

（的jsfiddle：https://jsfiddle.net/z3nhprzp/）

Answer 2

我認爲這個問題是在這裏，如：

var a = [1, 2, 3, 4, 5]; 
for(var i=0; i < a.length; i++) { 
    setTimeout(function() { 
     console.log(i); //5 
     console.log(a[i]) //undefined; 
    }, 1000) 
} 

如果你想解決，需要關閉：

var a = [1, 2, 3, 4, 5]; 
    for(var i=0; i < a.length; i++) { 
     (function(index) { 
      setTimeout(function() { 
       console.log(index); //1,2,3,4,5 
       console.log(a[index]) //1,2,3,4,5; 
      }, 1000) 
     })(i); 
    } 

這是問題的實質！

爲您的代碼：

for (var i=0; i < pcells.length; i++) { 
    (function(index) { 
     pcells[index].onclick = function() { 
      var div = document.createElement('div'); 
      div.style.backgroundColor = "red"; 
      div.style.height = "10px"; 
      div.style.width = "10px"; 

      pcells[index].appendChild(div); 
     }; 
    })(i); 
} 

的方式，韌皮是用 '這個' 或 '事件'，如：

element.onclick = function(event) { 
    console.log(this); 
    console.log(event); 
    //use 'this' or 'event' do something 
} 

Answer 3

試試這個：

var pcells = document.getElementsByClassName('priority-cell'); 
 

 
for (var i=0; i < pcells.length; i++) { 
 
    pcells[i].onclick = function() { 
 
    var div = document.createElement('div'); 
 
     div.style.backgroundColor = "red"; 
 
     div.style.height = "10px"; 
 
     div.style.width = "10px"; 
 

 
     this.appendChild(div); 
 
    }; 
 
}

<div class="priority-cell">CLICK HERE</div>