js中控制div小方格变色问题

Question

var gridNodes = new Array(48);  //总共48个小格子,6行8列;
var rowNodes = new Array(6);    //每行的框架DIV,共6行;window.onload = init;function init() {
    var frame = document.getElementById('frame');//frame为总的背景div
    for (i = 0; i < 48; ++i) {
        gridNodes[i] = document.createElement('div');
        gridNodes[i].className = 'original';
        gridNodes[i].onclick = function() { ChangeColor(gridNodes[i]) };
    }
    for (i = 0; i < 6; i++) {
        rowNodes[i] = document.createElement('div');
        rowNodes[i].className = 'row';
    }
    for (i = 0,r=-1; i < 48; i++) {
        if (i % 8 == 0) {
            r++;
            frame.appendChild(rowNodes[r]);            
        }
       rowNodes[r].appendChild(gridNodes[i]);    }
}var ChangeColor = function(obj) {
    obj.style.background = '#000000';
}

Answer 1

var gridNodes = new Array(48);  //总共48个小格子,6行8列;
var rowNodes = new Array(6);    //每行的框架DIV,共6行;window.onload = init;function init() {
    var frame = document.getElementById('frame');//frame为总的背景div
    for (i = 0; i < 48; ++i) {
        gridNodes[i] = document.createElement('div');
        gridNodes[i].className = 'original';
        gridNodes[i].onclick = function() { ChangeColor(this) };
    }
    for (i = 0; i < 6; i++) {
        rowNodes[i] = document.createElement('div');
        rowNodes[i].className = 'row';
    }
    for (i = 0,r=-1; i < 48; i++) {
        if (i % 8 == 0) {
            r++;
            frame.appendChild(rowNodes[r]);            
        }
       rowNodes[r].appendChild(gridNodes[i]);    }
}var ChangeColor = function(obj) {
    obj.style.background = '#000000';
}

Answer 2

晕(color=#FF0000]this/color])这个不小心放上去了

Answer 3

帮楼上说明一下，楼主的代码是这样的 gridNodes[i].onclick = function() { ChangeColor(gridNodes[i]) };也就是说这样一个函数是在gridNodes当中的某一个node被点击时触发的，该时间被触发后，执行这个函数，可执行这个函数的时候i已经是48了（已经过了初始化阶段)，也就是说，这时传给ChangeColor的是一个不存在的node，当然就出错了，像楼上那样传一个this过去，这时传给ChangeColor的就是被点击的对象。

Answer 4

呵呵,CSDN就是好,高手就是多啊,呵呵,谢谢两位......