2014-05-06 152 views
0

近一個頁面,吸引了一個數據驅動的網格,網格包有此代碼底部...的getElementById()返回null現有對象

<script type="text/javascript"> 
    (function(window, document, undefined) { 
     "use strict"; 
     var gridColSortTypes = 
      ["string", "string", "number", "number", "number", "number", "number", "number", "number", "number"], 
      gridColAlign = []; 
     var onColumnSort = function(newIndexOrder, columnIndex, lastColumnIndex) { 
     var doc = document; 
     var offset = (this.options.allowSelections && this.options.showSelectionColumn)?1:0; 
     if(columnIndex !== lastColumnIndex) { 
      if(lastColumnIndex > -1) { 
      doc.getElementById("stockHdr" + (lastColumnIndex-offset)).parentNode.style.backgroundColor = ""; 
      } 
      doc.getElementById("stockHdr" + (columnIndex-offset)).parentNode.style.backgroundColor = "#f7f7f7"; 
     } 
     }; 
     ... 
})(this, this.document); 

調查爲什麼指定排序列顏色更改失敗發現,雖然getElementById()查詢的對象存在且正在頁面中運行,但在此函數內部,這些getElementById()調用返回Null。事實上,由該函數調用的所有getElementById()調用都返回Null。

爲什麼?

+0

確定的DOM元素並且可觸及在這段代碼執行的時候?嘗試在window.onload中包裝你的函數。另外(無關和迂腐),爲什麼不只是調用你的外部閉包參數'doc'而不是創建另一個var? –

回答

1

我要去假設DOM內容還沒有準備好/訪問,當您試圖訪問它,嘗試包裝你的代碼window.onload

window.onload = function(){ 
    (function(window, doc, undefined) { 
     "use strict"; 
     var gridColSortTypes = 
      ["string", "string", "number", "number", "number", "number", "number", "number", "number", "number"], 
      gridColAlign = []; 
     var onColumnSort = function(newIndexOrder, columnIndex, lastColumnIndex) { 
     var offset = (this.options.allowSelections && this.options.showSelectionColumn)?1:0; 
     if(columnIndex !== lastColumnIndex) { 
      if(lastColumnIndex > -1) { 
      doc.getElementById("stockHdr" + (lastColumnIndex-offset)).parentNode.style.backgroundColor = ""; 
      } 
      doc.getElementById("stockHdr" + (columnIndex-offset)).parentNode.style.backgroundColor = "#f7f7f7"; 
     } 
     }; 
     ... 
    })(this, this.document); 
};