Javascript此引用可以内联工作，但没有内联引用则不行_Javascript_Html_Css

Javascript此引用可以内联工作，但没有内联引用则不行

javascript html css

Javascript此引用可以内联工作，但没有内联引用则不行,javascript,html,css,Javascript,Html,Css,好吧，我不得不重新措辞，以便更好地理解我的问题所以我有一个充满div的块，我想让它们在点击时改变颜色。因此，如果我将内联引用与this一起使用，函数将正常工作 <html><head><style> body {font-family:"BACKTO1982", System, san serif; background-color:#666; font-weight: normal; font-size: normal; padding: 0;

好吧，我不得不重新措辞，以便更好地理解我的问题

所以我有一个充满div的块，我想让它们在点击时改变颜色。因此，如果我将内联引用与this一起使用，函数将正常工作

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

但这个函数似乎并没有真正起作用。我不确定这是不是因为没有正确引用对象，或者是因为格式不正确，但我的控制台似乎没有发现任何问题，它就是不工作

希望这比我在这个问题上的第一次尝试更有意义。

编辑：根据评论中的建议更改了事件侦听器代码

document.getElementsByClassName（'blocks'）

是一个数组节点列表，包含类

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

var arr=document.getElementsByClassName（'blocks'）；
var len=阵列长度；
var toBlack=function（）{this.style.backgroundColor='#000000'}
对于（var i=0；iEDIT）：根据注释中的建议更改事件侦听器代码
document.getElementsByCassName（'blocks'）
是一个数组节点列表，包含类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;
}

var arr=document.getElementsByClassName（'blocks'）；
var len=阵列长度；
var toBlack=function（）{this.style.backgroundColor='#000000'}
对于（var i=0；i
但当我测试你的代码时，它正在我的PC上运行IE9
但是当我测试你的代码时，它在我的电脑上运行在IE9上。
+1但是最好在循环之前将事件处理程序存储在一个变量中；否则，每次迭代都会创建一个新的重复函数。准确地说，getElementsByClassName
返回一个NodeList
实例，它类似于数组，但不是数组。@Oriol完成。另外，很高兴了解节点列表的区别。谢谢。+1但最好在循环之前将事件处理程序存储在一个变量中；否则，每次迭代都会创建一个新的重复函数。准确地说，getElementsByClassName
返回一个NodeList实例，它类似于数组，但不是数组一个数组。@Oriol完成。另外，很高兴知道节点列表的区别。谢谢。我喜欢这里的想法，但它在Chrome上会出错。我认为它引用的局部变量超出了函数的范围。@ThomasCheney它在Chrome中也应该可以正常工作。不要使用setAttribute版本，坚持赋值给属性。我认为虽然它在我的Chrome上不起作用，因为使用了变量名newBlock，它只是一个临时名称，但我可能犯了一个错误，因为它阻止了所有块呈现到页面上。我喜欢这里的想法，但它在Chrome上引发了错误。我想它引用的局部变量超出了函数的范围。@ThomasCheney它在Chrome中也应该可以正常工作。不要使用setAttribute版本，坚持指定属性。我认为它在我的Chrome上不起作用，因为使用了变量名newBlock，它只是一个临时名称，但我可能犯了一个错误，因为它阻止了所有块呈现到页面上。
//newBlock.setAttribute('onclick','change(this);');
        newBlock.onclick = change;
...    ....
function change() {
  this.style.backgroundColor = '#000000';
}