자바 스크립트 : document.getElementbyID (..)가 null이거나 객체가 아닙니다.

아래 JavaScript 코드가 나에게 왜 document.getelementbyid가 null인지 또는이 줄의 객체가 아닌지를 생각할 수 없습니다. line : 그것이 onload 이벤트에서 생성되기 때문에, 당신의 요소를 찾을 수없는자바 스크립트 : document.getElementbyID (..)가 null이거나 객체가 아닙니다.

<html> 
<head> 
    <title>Scrolling Data Grid</title> 
<style> 
/* ==================================================================== */ 
/* SCROLLING DATA GRID - IE ONLY!          */ 
/* ==================================================================== */ 
/* 
Tables inside a scrollingdatagrid should have: 
1. border-collapse:separate 
2. No border or margin 
3. Background colors on all cells to avoid bleed-thru on scroll 
4. cellspacing="0" on the <table> tag itself 
*/ 
DIV.scrollingdatagrid { 
    overflow-x:auto; 
    overflow-y:auto; 
    position:relative; 
    padding:0px; 
} 
DIV.scrollingdatagrid TABLE { 
    width : 98.7%; /* Make room for scroll bar! */ 
    margin:0px; 
    border:0px; 
    border-collapse:separate; 
} 
DIV.scrollingdatagrid TABLE TR .locked, DIV.scrollingdatagrid TABLE THEAD TR, DIV.scrollingdatagrid TABLE TFOOT TR { 
    position:relative; 
} 
/* OffsetParent of the TR is the DIV because it is position:relative */ 
DIV.scrollingdatagrid TABLE THEAD TR { 
    top:expression(this.offsetParent.scrollTop); 
} 


/* Make the z-index values very clear so overlaps happen as expected! */ 
DIV.scrollingdatagrid TD, DIV.scrollingdatagrid TH { z-index:1; } 
DIV.scrollingdatagrid TD.locked, DIV.scrollingdatagrid TH.locked { z-index:2; } 
DIV.scrollingdatagrid THEAD TR, DIV.scrollingdatagrid TFOOT TR { z-index:3; } 
DIV.scrollingdatagrid THEAD TR TH.locked { z-index:4; } 
</style> 


<script type="text/javascript"> 
window.onload = function(){ write_it() } 

function write_it() { 

var cn  = new ActiveXObject("ADODB.Connection") 
var rs  = new ActiveXObject("ADODB.Recordset") 
var dbFile = "imts.mdb" 
var dbPath = "G:\\AS\\Asf\\ASF\\IMTS\\V8\\database\\" 

var mySQL = "SELECT * FROM tbl_imts WHERE [FILE NUMBER] LIKE '%99%'" 
var html = "" 

cn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + dbPath + dbFile + ""); 
rs.Open(mySQL, cn, 1, 3) 

html += '<table id="mstrTable" style="table-layout: fixed; font-family: arial; font-size: 9pt;" cellpadding="0" cellspacing="0">\n' 
html += '<thead>\n' 
html += '<tr>\n' 
html += '<th class="locked" style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; height: 30px; width: 20px; color: rgb(102,102,102); background-color: rgb(212,208,200);">#</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(0).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(1).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(2).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(3).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(4).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(5).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(6).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(7).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(8).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(9).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(10).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(11).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(12).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(13).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(14).name + '</th>\n' 
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: none; padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(15).name + '</th>\n' 
html += '</tr>\n' 
html += '</thead>\n' 

rs.MoveFirst 
var i = 0 
html += '<tbody>\n' 
while (!rs.eof) { 
++i 
    html += '<tr style="color: rgb(102,102,102)">\n' 
    html += '<td class="locked" style="height: 20px; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);">'+i+'.</td>\n' 
    for (var r = 0; r < rs.fields.count; ++r) { 
    if (!rs.fields(r).value) { rs.fields(r).value = "&nbsp;" } 
    html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">'+rs.fields(r).value+'</td>\n' 
    }//end of for 
    html += '</tr>\n' 
    rs.MoveNext 
    }//end of while 
html += '</tbody>\n' 
html += '</table>\n' 
document.getElementById("p1").innerHTML = html 
} 
</script> 
</head> 

<body> 

<div id="p1" class="scrollingdatagrid" style="width:800px;height:200px;border:1px solid rgb(128,128,128);"></div> 

<script type="text/javascript"> 
(function() { 
var color = "#E1E0D7" 
var rows = document.getElementById("mstrTable").getElementsByTagName("tr"); 
var n = rows.length; 
var bgcs = []; 
for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor; 
//rows[0].style.backgroundColor = color; 
function changeColor(e) { 
if(!e) e = window.event; 
var o = e.target? e.target: e.srcElement; 
if (o.tagName == "TH") { return } 
while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode; 
for(var i=0; i<n; ++i) { 
rows[i].style.backgroundColor = bgcs[i]; 
if(rows[i]==o) { 
       rows[i].style.backgroundColor = color 
       } 
} 
} 
if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false); 
else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor); 
})(); 
</script> 














</body> 
</html>

출처

2012-06-22 Jason Kelly

EW. 이것은 무서운 것이다. SQL 데이터베이스 파일을 직접 호출하는 것은 결코 웹 클라이언트에서 좋은 아이디어가 아닙니다. –

브라우저에서받은 코드를 게시 할 수 있습니까? (서버 측 논리가없는) – fcalderan

readyState를 기다리지 않는 블록에서 나만 실행되거나'getElementById()'가 실행됩니까 ... – canon

load에 대한 응답으로 write_it()을 호출합니다. DOM은 완전히 빌드되고 모든 이미지와 하위 프레임이 완전히로드 된 후에 실행됩니다. onload 발사시기에 대한 자세한 내용은 MDN window.onload 문서 페이지를 참조하십시오. DOM에 내장되기 전에 자바 스크립트 실행 evironment이 설정으로

그러나, 당신의 getElementById 호출은 즉시 즉시을 발사한다. write_it 함수는 onload을 선택하려고하는 테이블을 생성하고 사용자가 getElementById 호출 후에 실행하므로 테이블을 선택하려고하면 테이블이 아직 존재하지 않습니다.

모든 코드를 write_it 함수로 옮겨서 DOM을 빌드 할 때까지 실행되지 않도록해야합니다.

출처

2012-06-22 13:27:20 apsillers

나는 그것을 시도했지만 출력에서 얻을 : 'document.getElementById ("p1"). innerHTML = html} 다음 빈 div 상자? –

: 모든 작동해야한다 (111) 내 지식에 관해서는 필자는 모든

var rows = document.getElementById("mstrTable").getElementsByTagName("tr");

여기에 전체 코드의 선언 전체 문서가 로딩 될 때 트리거됩니다. 디. 즉, 오류 코드 행이 실행 된 후 을 작성한 후을 의미합니다.

출처

2012-06-22 13:25:10 Amberlamps

자바 스크립트 : document.getElementbyID (..)가 null이거나 객체가 아닙니다.

답변

관련 문제