Javascript：无法使用getElementById获取元素

好的。我需要新鲜的眼睛，因为我仍然在这个问题上持续一个小时！Javascript：无法使用getElementById获取元素

这里是我的简单的HTML代码（testssio.html），其中包括JavaScript的脚本：

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
     var ssio = document.getElementById('ssio'); 
     ssio.html = "it finally works!"; 
    </script> 
</head> 
<body> 
    <div id="ssio"></div> 
</body> 
</html>

但它不工作！使用调试器，我得到：

Uncaught TypeError: Cannot set property 'html' of null   /testssio/:6

有没有人知道它？我知道这不是寻找调试帮助的正确位置，但如果我不明白，我会发疯的！那么请帮忙吗？

Tahnks提前。

来源

2012-09-09 htaidirt

这样做的原因是在页面呈现前头部的脚本加载。这意味着您的内容尚未呈现，因此不是document的一部分。

如果你想看到这项工作，请尝试移动脚本下面的元素呈现，就像这样：

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<div id="ssio"></div> 
<script type="text/javascript"> 
    var ssio = document.getElementById('ssio'); 
    ssio.innerHTML = "it finally works!"; 
</script> 
</body> 
</html>

这样做的一个更加规范的方式是与事件。很多人使用jQuery，但它可以用普通的js来完成。这将意味着改变你的脚本是这样的：

<script type="text/javascript"> 
    function WinLoad() { 
    var ssio = document.getElementById('ssio'); 
    ssio.innerHTML = "It finally works!"; 
    } 
    window.onload = WinLoad; 
</script>

这样，你仍然可以把它留在<head>。

此外，使用.html是从jQuery。它通常用作.html(content)。如果您想使用纯javascript版本，请使用.innerHTML = content。

我提到了jQuery，因为它是一个高度使用的API。这句话是从他们的网站：

jQuery是一个快速，简洁的JavaScript库，它简化了HTML文档遍历，事件处理，动画，以及快速的Web开发Ajax交互。 jQuery旨在改变您编写JavaScript的方式。

来源

2012-09-09 16:41:31

您的代码在DOM加载之前运行得太早，因此document.getElementById()尚未在文档中找到该元素。

您可以将脚本标记向下移动到</body>标记之前，也可以在使用window onload事件或DOMReady事件运行代码之前等待DOM加载。

来源

2012-09-09 16:41:30 jfriend00

这里有两个错误。首先，您需要将SCRIPT标签放在元素后面。其次，它不是.html，而是.innerHTML。因此，这里是更正后的代码：

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <div id="ssio"></div> 
     <script type="text/javascript"> 
     var ssio = document.getElementById('ssio'); 
     ssio.innerHTML = "it finally works!"; 
    </script> 
</body> 
</html>

来源

2012-09-09 16:44:44 rationalboss

你可以使用这样的事情

<!DOCTYPE html> 
    <html> 
    <head> 
    <script type="text/javascript"> 
    document.onload= function(){ 
    var ssio = document.getElementById('ssio'); 
    ssio.html = "it finally works!"; 
    } 
</script> 
</head> 
<body> 
<div id="ssio"></div>

来源

2012-09-09 16:45:45

Javascript：无法使用getElementById获取元素

回答

相关问题