Question

当我调用onclick函数时出错。我的HTML只是一个用Javascript填充的表：

for(var i=0;i<8;i++){
    txt+='<tr id="ligne'+ligne+'">';
    for(var j=1;j<9;j++){

        id=ligne+'c'+j;
        txt+='<td id="'+id+'" class="'+class_col+'" >';

        txt+= '</td>';

    }
    txt+='</tr>';

    ligne++;
}
document.getElementById("echiquier").innerHTML = txt;

这很好用，但是当我单击时创建一个改变td背景的函数时，我有错误“undefined is not a function”。我的职责是：

document.getElementsByTagName("td").addEventListener('click', function(){
    id = this.id;
    document.getElementById(id).style.background = "blue";
});

Answer 1

document.getElementsByTagName("td").addEventListener

这不起作用，因为document.getElementsByTagName("td")会返回HTMLCollection而不是HTMLElement。您需要索引所需的元素。

例如

document.getElementsByTagName("td")[0]

将返回第一个td元素。如果你在循环中工作，你可以使用

document.getElementsByTagName("td")[i].addEventListener

在函数的内部，您可以直接使用this。无需检索id并再次搜索它（ID可能甚至不存在）。只需使用

this.style.background = "blue";

您还可以尝试使用事件委派：

document.getElementById("yourTableElement")
  .addEventListener('click',function(e){
    if(e.target.nodeName=='TD'){
      e.target.style.background = "blue";
    }
  });

Answer 2

您收到错误的原因是addEventListener()不适用于多个事件目标（即元素）。

尝试以下解决方案：

Array.prototype.forEach.call(document.getElementsByTagName('td'), function (element) {
    element.addEventListener('click', function (e) {
        e.target.style.backgroundColor = 'blue';
    });
});

就我个人而言，我认为使用Array.prototype.forEach.call()比通过for循环并处理索引更清晰。使用上述方法，我们说我们应该将HTMLCollection视为Array。这样，我们就可以在DOM集合上使用Array方法。

onclick函数中的javascript错误

2 个答案: