Javascript this reference inline，but not without inline reference

好吧，我不得不重新說出這個來更好地理解我所問的內容。Javascript this reference inline，but not without inline reference

所以我有一個塊填充divs，我想讓他們改變顏色，如果點擊。所以，如果我使用這個的內聯參考，該功能正常工作。

<html><head><style> 
body  {font-family:"BACKTO1982", System, san serif; background-color:#666; font-weight: normal; font-size: normal; padding: 0; margin: 0; height: 100%; min-height: 700px; width: 100%; min-width: 800px; overflow: hidden;} 
#theBlock {position:relative; height: 640px; width: 800px; margin:20px auto 20px auto; padding:0; overflow:hidden;} 
.blocks {height:12px;width:12px;border:1px solid #eee;background-color:#ffffff;margin:0;padding:0;display:inline-block;} 
</style><script> 
x = 0; 
window.onload = function(){ 
    for(i=0;i<3200;i++){ 
    var newBlock = document.createElement('div'); 
    newBlock.setAttribute('class', 'blocks'); 
    newBlock.setAttribute('id','blockId'+x); 
    newBlock.setAttribute('onclick','change(this);'); 
    document.getElementById('theBlock').appendChild(newBlock); 
    x++; 
    } 
} 
function change(x){ 
    x.style.backgroundColor = '#000000'; 
} 
</script></head><body><div id="theBlock"></div></body></html>

然而，由於內嵌的JavaScript不是代碼最乾淨的方式，所以我試圖讓使用這引用的函數，在地方變化（中）像這樣：

document.getElementsByClassName('blocks').onclick = function(){ 
    this.style.backgroundColor = "#000000"; 
}

但是這個功能似乎並沒有真正做任何事情。我不確定這是否是它沒有正確引用該對象的問題，或者是格式錯誤，但我的控制檯似乎沒有發現任何問題，它只是不起作用。

希望這比我在這個問題上的第一次嘗試更有意義。

來源

2014-09-02 Thomas Cheney

編輯：更改事件監聽器代碼，根據建議在評論中。

document.getElementsByClassName('blocks')是 ~~array~~ NodeList包含所有類blocks的元素。所以你不能爲它們添加一個連聽者。

嘗試這種情況：

var arr = document.getElementsByClassName('blocks'); 
var len = arr.length; 
var toBlack = function() {this.style.backgroundColor = '#000000';} 
for (var i=0; i<len; i++) { 
    arr[i].onclick = toBlack; 
}

此遍歷陣列節點列表並附加一個事件監聽到的每個元素。

來源

2014-09-02 02:06:12 flowstoneknight

+1但是，最好在循環之前將事件處理程序存儲在變量中;否則，每次迭代都會創建一個新的重複函數。準確地說，'getElementsByClassName'返回一個'NodeList'實例，它是類似數組的，但不是數組。 – Oriol 2014-09-02 02:07:47

@Oriol完成。另外，有關NodeList的區別很好。謝謝。 – flowstoneknight 2014-09-02 02:12:50

//newBlock.setAttribute('onclick','change(this);'); 
     newBlock.onclick = change; 
... .... 
function change() { 
    this.style.backgroundColor = '#000000'; 
}

但是當我測試你的代碼時，它在我的電腦上工作在IE9上。

來源

2014-09-02 02:13:49 yyou

我喜歡這裏的想法，但它在Chrome上拋出錯誤。我認爲它引用了函數範圍之外的局部變量。 – 2014-09-02 02:27:20

@ ThomasCheney-它也應該在Chrome中正常工作。不要使用* setAttribute *版本，堅持分配屬性。 – RobG 2014-09-02 02:44:25

我認爲它在我的Chrome上不起作用，因爲變量名newBlock只是一個臨時名稱，但我可能犯了一個錯誤，因爲它阻止了所有塊渲染到頁面。 – 2014-09-02 03:09:57

Javascript this reference inline，but not without inline reference

回答

相關問題