首页 > 解决方案 > 为什么从 JS 代码调用 innerHTML 不起作用?

问题描述

我在我的 JS 代码中调用了一个名为 Func() 的函数,它应该使用 innerHTML 方法更改 html 标记内容,但它不起作用。

HTML 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>

    <p id="result">results will be here</p>

</body>
</html>

JavaScript 代码

function Func(){
    var a = "Hello world";
    document.getElementById("result").innerHTML = a;
}

Func();

The console shows this error:
Uncaught TypeError: Cannot set property 'innerHTML' of null

标签: javascripthtml

解决方案


改成这样:

Document.addEventListener("DOMContentLoaded",        
function(event) { 
  Func();
});

或者,如果您有 jquery,请将其用于准备好的事件。

只有当 Dom 准备好并且元素结果准备好时,才能调用此函数 Func


推荐阅读