Question

我想用javascript创建一个日历：

我通过这个功能创建元素：

createElem : function (name, attrs){
     var el = document.createElement(name);
     for(var key in attrs) {
        el.setAttribute(key, attrs[key]);
     }
     return el;
}

表：

var tb=this.createElem("table", {"class":"p-calendar", id: "p-calendar"});

行和单元格：

for(var i=2; i<to; i++){
    tb.insertRow(i);
    for(var j=0; j < 7; j++){
       tb.rows[i].insertCell(j);
       .
       .

所以在我的循环中：

tb.rows[i].cells[j].className="day"; // it's work

但是：

tb.rows[i].cells[j].onclick = function(){
    tb.rows[i].cells[j].id = "today";
}  // Unable to set property 'id' of undefined or null reference

为什么会出错？！
什么是将函数绑定到由其创建的元素的最佳方法 JavaScript的吗

提前致谢。

Answer 1

简答：您的onclick处理程序需要closure。

答案很长： 您的索引i和j会在for循环中递增。实际点击元素后，您的onclick处理程序会被调用。猜猜i和j的价值是什么。它们超出了rows和cells的元素数组的范围。这意味着每个元素都使用相同的i和j值，并且它们都没有在元素数组的范围内获取值。您可以通过在当前i处理程序中记录j和onclick的值来验证这一点。

<强>解决方案：

替换块：

tb.rows[i].cells[j].onclick = function(){ ... }

使用：

var getOnclickMethod = function (i, j) {
    var cur_i = i * 1;
    var cur_j = j * 1;
    var callback = function(){
        tb.rows[cur_i].cells[cur_j].id = "today";
    };
    return callback;
};

tb.rows[i].cells[j].onclick = getOnclickMethod(i, j);

将函数绑定到由javascript创建的元素

1 个答案: