Javascript document.getElementById ne semble pas fonctionner

J'ai le code suivant, et la console javascript en chrome dit "Impossible de lire la propriété innerHTML de null." Pourquoi document.getElementById ('display') apparaît-il les mains vides? ?Javascript document.getElementById ne semble pas fonctionner

<!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>

Source

2010-07-09 lowerkey

Mettez votre balise de script à la fin du document :. Dans votre cas, la page n'a pas été complètement analysé dans l'arbre DOM, mais votre script est exécuté de toute façon:

 <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>

Ceci est également considéré comme une bonne pratique pour des raisons de performance: http://developer.yahoo.com/performance/rules.html#js_bottom

Source

2010-07-09 05:40:49 naikus

Vous appelez showmsg avant que la page entière (et donc le display div) est chargé. d'où l'erreur. appelle en onload et ça va marcher.

Ajouter cette fonction à la <head>

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

et l'appeler de onload

<body onload="handleLoad()">

Source

2010-07-09 05:36:30 Amarghosh

Déplacez votre script section vers le bas de la page. Sinon, il est exécuté avant le chargement de la page.

BTW: mettre les scripts en bas de votre page est même une "meilleure pratique" et recommandé par Google, Yahoo & Co

Source

2010-07-09 05:41:32

+1 pour suggérer le lien Yahoo. Je ne l'ai pas vu avant (quand j'ai édité ma réponse) – naikus

Javascript document.getElementById ne semble pas fonctionner

Répondre

Questions connexes