在html中使用getelementbyid获取Null类型的错误[重复]答案

【问题标题】：Getting error of Null type with getelementbyid in html [duplicate]在html中使用getelementbyid获取Null类型的错误[重复]
【发布时间】：2017-08-05 17:17:33
【问题描述】：

我对html页面中的简单代码getelementbyid.innerHtml感到震惊。请帮我。

<!doctype html>
<html lang="en">
	<head>
		<title>Dom examples</title>
		<script>
			var code = document.getElementById("one").innerHTML;
			code = code + " !!";
			console.log(code);
		</script>
	</head>
	<body>
		<h4> DOM practise page </h4>
		<p id="one"> This page is for practise of DOM model in JS</p>
		<p id="two"> Thank You </p>
	</body>
</html>

【问题讨论】：

因为尚未加载 id=one 的元素
你试过.innerText而不是.innerHTML吗？

标签： javascript html innerhtml getelementbyid

【解决方案1】：

您的 javascript 在您的浏览器呈现您的 HTML 页面之前被调用。因此，当您的浏览器调用 getElementById 时，ID 未定义。

只需将 javascript 移到文件末尾

【讨论】：

将脚本标签移到html标签之后就足够了。

【解决方案2】：

只需移动下面的脚本...原因是因为 id 尚未渲染。

<!doctype html>
<html lang="en">
	<head>
		<title>Dom examples</title>
		
	</head>
	<body>
		<h4> DOM practise page </h4>
		<p id="one"> This page is for practise of DOM model in JS</p>
		<p id="two"> Thank You </p>
	</body>
    <script>
			var code = document.getElementById("one").innerHTML;
			code = code + " !!";
			console.log(code);
		</script>
</html>

【讨论】：

我是 JS 和 Html 的新手。你的建议对我有帮助！！太感谢了！！它起作用了:-)

【解决方案3】：

利用window 的onload 属性在window 已加载时调用函数

<!doctype html>
<html lang="en">

<head>
  <title>Dom examples</title>
  <script>
    onload = function() {
      var code = document.getElementById("one").innerHTML;
      code = code + " !!";
      console.log(code);
    }
  </script>
</head>

<body>
  <h4> DOM practise page </h4>
  <p id="one"> This page is for practise of DOM model in JS</p>
  <p id="two"> Thank You </p>
</body>

</html>

【讨论】：

【解决方案4】：

只需将脚本部分放在关闭正文之前即可。

<!doctype html>
<html lang="en">
    <head>
        <title>Dom examples</title>
    </head>
    <body>
        <h4> DOM practise page </h4>
        <p id="one"> This page is for practise of DOM model in JS</p>
        <p id="two"> Thank You </p>

        <script>
            var code = document.getElementById("one").innerHTML;
            code = code + " !!";
            console.log(code);
        </script>
    </body>
</html>

【讨论】：

【解决方案5】：

浏览器从上到下解析 html 页面。所以，如果你把你的script 放在head 中，它会先被渲染，然后是你的body。因此，您的 script 正在搜索尚未呈现给 DOM 的 id。

通过将script 放在底部，它可以解决您的问题。

<!doctype html>
<html lang="en">
	<head>
		<title>Dom examples</title>
	</head>
	<body>
		<h4> DOM practise page </h4>
		<p id="one"> This page is for practise of DOM model in JS</p>
		<p id="two"> Thank You </p>
    <script>
			var code = document.getElementById("one");
			code = code.innerHTML + " !!";
			console.log(code);
		</script>
	</body>
</html>

【讨论】：

【解决方案6】：

只要最后使用脚本标签就可以了。进行更清晰的检查。 https://jsfiddle.net/djmayank/Lzewxgyw/

HTML

<head>
        <title>Dom examples</title>

    </head>
    <body>
        <h4> DOM practise page </h4>
        <p id="one"> This page is for practise of DOM model in JS</p>
        <p id="two"> Thank You </p>
    </body>

JS

var code = document.getElementById("one").innerHTML;
        code = code + " !!";
        console.log(code);

【讨论】：

【解决方案7】：

script 在加载 id 为 1 的元素之前加载，因此尚不存在。您有以下选择：

你把脚本放在你需要的标签之后： <!doctype html> <html lang="en"> <head> <title>Dom examples</title> </head> <body> <h4> DOM practise page </h4> <p id="one"> This page is for practise of DOM model in JS</p> <p id="two"> Thank You </p> <script> var code = document.getElementById("one").innerHTML; code = code + " !!"; console.log(code); </script> </body> </html>
创建一个function 并使用onload 属性，这是更可取的，因为代码将可用于其他功能： <!doctype html> <html lang="en"> <head> <title>Dom examples</title> <script> function myFunction() { var code = document.getElementById("one").innerHTML; code = code + " !!"; console.log(code); } </script> </head> <body> <h4> DOM practise page </h4> <p id="one" onload="myFunction()"> This page is for practise of DOM model in JS</p> <p id="two"> Thank You </p> </body> </html>

【讨论】：