Javascript document.getElementById不';好像不行
我有以下代码,chrome中的javascript控制台说“无法读取null的innerHTML属性。为什么document.getElementById('display')会空手而归?”Javascript document.getElementById不';好像不行,javascript,getelementbyid,Javascript,Getelementbyid,我有以下代码,chrome中的javascript控制台说“无法读取null的innerHTML属性。为什么document.getElementById('display')会空手而归?” <!DOCTYPE html> <html> <head> <title>Chat 3</title> <script type="text/javascript"> fu
<!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>
聊天3
函数showmsg(str){
var display=document.getElementById('display');
display.innerHTML+=“”+str+“”;
}
如果(“窗口中的WebSocket”){
通过;
}否则{
showmsg(“您的浏览器不支持WebSocket。请尝试谷歌浏览器。”);
}
#用户名{
填充:0px;
边际:0px;
高度:26px;
宽度:400px;
}
/*添加了包装onlineusers和display的容器div*/
#容器{
利润率:10px0;
}
/*使用float:left将它们并排放置*/
#显示{
填充:0px;
边际:0px;
边框样式:实心;
边框宽度:1px;
溢出:自动;
高度:400px;
宽度:400px;
浮动:左;
}
#在线用户{
填充:0px;
边际:0px;
高度:400px;
宽度:200px;
边框样式:实心;
边框宽度:1px;
浮动:左;
}
/*添加container2以包装inputline和sendbutton*/
#集装箱2{
利润率:10px0;
}
#输入线{
填充:0px;
边际:0px;
高度:26px;
宽度:350px;
浮动:左;
}
#发送按钮{
填充:0px;
边际:0px;
高度:30px;
宽度:50px;
浮动:左;
}
/*这是一个用得很好的“黑客”*/
.clearfix{
明确:两者皆有;
}
在加载整个页面(以及display
div)之前,您正在调用showmsg
。因此出现错误。从onload
调用它,它就会工作
将此功能添加到
并从onload
<body onload="handleLoad()">
将脚本标记放在文档末尾:。 在您的情况下,页面尚未完全解析为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>
函数showmsg(str){
var display=document.getElementById('display');
display.innerHTML+=“”+str+“”;
}
如果(“窗口中的WebSocket”){
通过;
}否则{
showmsg(“您的浏览器不支持WebSocket。请尝试谷歌浏览器。”);
}
出于性能原因,这也被认为是一种良好做法:
将脚本部分向下移动到页面底部。否则,它将在页面加载之前执行
顺便说一句:将脚本放在页面底部甚至是一种“最佳实践”,谷歌公司建议您使用雅虎链接。我以前没有看到过它(当我编辑我的答案时)
<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>