2010-07-09 58 views
3

我有以下代码,并在Chrome中的JavaScript控制台说:“无法读取null的innerHTML属性。为什么document.getElementById('显示')出现空手?Javascript document.getElementById似乎没有工作

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Chat 3</title> 
     <script type="text/javascript"> 
      function showmsg(str){ 
       var display = document.getElementById('display'); 
       display.innerHTML += "<p>" + str + "</p>"; 
      } 

      if("WebSockets" in window){ 
       pass; 
      }else{ 
       showmsg("Your browser doesn't support WebSockets. Try Google Chrome."); 
      } 
     </script> 

     <style type="text/css"> 
     #username { 
      padding: 0px; 
      margin: 0px; 
      height: 26px; 
      width: 400px; 
     } 

     /* ADDED container div that wraps onlineusers and display */ 
     #container { 
      margin: 10px 0; 
     } 

     /* use float: left to put them side-by-side */ 
     #display { 
      padding: 0px; 
      margin: 0px; 
      border-style: solid; 
      border-width: 1px; 
      overflow: auto; 
      height: 400px; 
      width: 400px; 
      float: left; 
     } 

     #onlineusers { 
      padding: 0px; 
      margin: 0px; 
      height: 400px; 
      width: 200px; 
      border-style: solid; 
      border-width: 1px; 
      float: left; 
     } 

     /* Added container2 to wrap inputline and sendbutton */ 
     #container2 { 
      margin: 10px 0; 
     } 

     #inputline { 
      padding: 0px; 
      margin: 0px; 
      height: 26px; 
      width: 350px; 
      float: left; 
     } 

     #sendbutton { 
      padding: 0px; 
      margin: 0px; 
      height: 30px; 
      width: 50px; 
      float: left; 
     } 

     /* this is a well used "hack". */ 
     .clearfix { 
      clear: both; 
     } 
     </style> 
    </head> 
    <body onload="document.getElementById("username").focus()"> 
      <input type="text" id="username" /> 
      <div id="container"> 
       <div id="display"></div> 
       <div id="onlineusers"></div> 
       <div class="clearfix"></div> 
      </div> 

      <div id="container2"> 
       <input type="text" id="inputline" length="55" /> 
       <input type="button" id="sendbutton" value="Send" /> 
      </div> 
    </body> 
</html> 

回答

2

把它放在你的脚本标签在文档的末尾:。 在你的情况下,页面还没有完全解析成DOM树,但你的脚本执行反正:

 <body onload="document.getElementById('username').focus()"> 
      <input type="text" id="username" /> 
      <div id="container"> 
       <div id="display"></div> 
       <div id="onlineusers"></div> 
       <div class="clearfix"></div> 
      </div> 

      <div id="container2"> 
       <input type="text" id="inputline" length="55" /> 
       <input type="button" id="sendbutton" value="Send" /> 
      </div> 

      <script type="text/javascript"> 
      function showmsg(str){ 
       var display = document.getElementById('display'); 
       display.innerHTML += "<p>" + str + "</p>"; 
      } 

      if("WebSockets" in window){ 
       pass; 
      }else{ 
       showmsg("Your browser doesn't support WebSockets. Try Google Chrome."); 
      } 
     </script> 
    </body> 

这也被认为是性能方面的原因一个很好的做法: http://developer.yahoo.com/performance/rules.html#js_bottom

6

整个页面之前,您所呼叫showmsg(因此display DIV)被加载。因此,错误。从onload调用它,它会工作。

添加此功能可将<head>

function handleLoad() 
{ 
    document.getElementById("username").focus() 
    if("WebSockets" in window){ 
    pass; 
    }else{ 
    showmsg("Your browser doesn't support WebSockets. Try Google Chrome."); 
    } 
} 

onload

<body onload="handleLoad()"> 
7

移动你的脚本部分直到页面的底部。否则,它在页面加载之前执行。

顺便说一句:在你页面的底部把脚本甚至有一个“最佳实践”,并通过谷歌推荐,Yahoo &有限公司

+1

+1暗示雅虎链接。我之前没有看到它(当我编辑我的答案时) – naikus 2010-07-09 05:52:03