未捕获的类型错误：无法读取属性“innerHTML”为空

发布于 2024-12-28 16:12:31 字数 186 浏览 3 评论 0原文

谁能解释一下这个错误是什么？

未捕获类型错误：无法读取 null 的属性“innerHTML”

这是导致问题的行：

var idPost=document.getElementById("status").innerHTML;

原文

Can anyone explain what is this error?

Uncaught TypeError: cannot read property 'innerHTML' of null

This is the line which is causing the issue:

var idPost=document.getElementById("status").innerHTML;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巴黎夜雨 2025-01-04 16:12:32

var idPost=document.getElementById("status").innerHTML;

您的网页中不存在“状态”元素。

所以 document.getElementById("status") 返回 null。虽然不能使用NULL的innerHTML属性。

您应该添加这样的条件：

if(document.getElementById("status") != null){
    var idPost=document.getElementById("status").innerHTML;
}

var idPost=document.getElementById("status").innerHTML;

The 'status' element does not exist in your webpage.

So document.getElementById("status") return null. While you can not use innerHTML property of NULL.

You should add a condition like this:

if(document.getElementById("status") != null){
    var idPost=document.getElementById("status").innerHTML;
}

回复收藏 0 原文

ら栖息 2025-01-04 16:12:32

更新：

这个问题不要求jquery。因此，让我们在不使用 jquery 的情况下完成此操作：

document.addEventListener("DOMContentLoaded", function(event) { 
    //Do work
});

请注意，此方法不适用于 IE8。

旧答案：

您在 DOM 准备好之前调用此脚本。如果你将此代码写入 jquery 的 $(function() 方法中，它将起作用。

Update:

The question doesn't ask for jquery. So lets do it without jquery:

document.addEventListener("DOMContentLoaded", function(event) { 
    //Do work
});

Note this method will not work on IE8.

Old Answer:

You are calling this script before DOM is ready. If you write this code into jquery's $(function() method it will work.

回复收藏 0 原文

南街九尾狐 2025-01-04 16:12:32

如果脚本位于 HTML 文档的头部，则浏览器尚未创建 HTML 文档的正文，无论最终会出现什么（如果您的脚本位于 HTML 文件中但位于 HTML 文档的上方，则会出现相同的结果）元素）。当您的变量尝试查找 document.getElementById("status") 时，它尚不存在，因此它返回 null 值。当您稍后在代码中使用该变量时，将使用初始值 (null)，而不是当前值，因为没有任何内容更新该变量。

我不想将我的脚本链接移出 HTML 头，所以我在 JS 文件中执行了此操作：

var idPost //define a global variable
function updateVariables(){
    idPost = document.getElementById("status").innerHTML; //update the global variable
}

在 HTML 文件中执行此操作：

<body onload="updateVariables()">

如果您已经有 onload 函数，则只需添加附加行到它或调用该函数。

如果您不希望该变量是全局变量，请在您尝试运行的函数中本地定义它，并确保在页面完全加载之前不会调用该函数。

If the script is in the head of your HTML document, the body of your HTML document has not yet been created by the browser, regardless of what will eventually be there (the same result occurs if your script is in the HTML file but above the element). When your variable tries to find document.getElementById("status") it does not yet exist, and so it returns a value of null. When you then use the variable later in your code, the initial value (null) is used and not the current one, because nothing has updated the variable.

I didn't want to move my script link out of the HTML head, so instead I did this in my JS file:

var idPost //define a global variable
function updateVariables(){
    idPost = document.getElementById("status").innerHTML; //update the global variable
}

And this in the HTML file:

<body onload="updateVariables()">

If you already have an onload function in place, you can just add the additional line to it or call the function.

If you don't want the variable to be global, define it locally in the function that you are trying to run and make sure the function is not called before the page has fully loaded.

回复收藏 0 原文

椵侞 2025-01-04 16:12:32

我有一个类似的问题，但我有现有的 id，正如 egiray 所说，我在加载 DOM 之前调用它，Javascript 控制台显示相同的错误，所以我尝试了：

window.onload = (function(){myfuncname()});

它开始工作。

I had a similar problem, but I had the existing id, and as egiray said, I was calling DOM before it loaded and Javascript console was showing the same error, so I tried:

window.onload = (function(){myfuncname()});

and it starts working.

回复收藏 0 原文

听风念你 2025-01-04 16:12:32

在 body 语句中的 html 结构之后运行代码

    <html>
    <body>
    <p>asdasd</p>
    <p>asdasd</p>
    <p>asdasd</p>
    <script src="myfile.js"></script>
    </body>
    </html>

run the code after your html structure in the body statement

    <html>
    <body>
    <p>asdasd</p>
    <p>asdasd</p>
    <p>asdasd</p>
    <script src="myfile.js"></script>
    </body>
    </html>

回复收藏 0 原文

忘年祭陌 2025-01-04 16:12:32

虽然理想情况下您应该突出显示导致错误的代码并将其发布在您的问题中，但该错误是因为您试图获取“status”元素的内部 HTML：

var idPost=document.getElementById("status").innerHTML;

但是“status”元素不存在 在 HTML 中 - 添加必要的元素或更改您尝试查找的 ID 以指向有效元素。

While you should ideally highlight the code which is causing an error and post that within your question, the error is because you are trying to get the inner HTML of the 'status' element:

var idPost=document.getElementById("status").innerHTML;

However the 'status' element does not exist within your HTML - either add the necessary element or change the ID you are trying to locate to point to a valid element.

回复收藏 0 原文

喜爱纠缠 2025-01-04 16:12:32

您是否在 #status 元素之前声明

如果这样做，将首先执行该标记中的语句，并且现在不存在 id 为 status 的元素。

最好的方法是将此脚本标记放在标记之前。

回复收藏 0 原文

守护在此方 2025-01-04 16:12:32

//Run with this HTML structure
<!DOCTYPE html>
<head>
    <title>OOJS</title>

</head>
<body>
    <div id="status">
    </div>
    <script type="text/javascript" src="scriptfile.js"></script>
</body>
</html>

//Run with this HTML structure
<!DOCTYPE html>
<head>
    <title>OOJS</title>

</head>
<body>
    <div id="status">
    </div>
    <script type="text/javascript" src="scriptfile.js"></script>
</body>
</html>

回复收藏 0 原文

吹梦到西洲 2025-01-04 16:12:32

看起来脚本在 DOM 加载之前执行。
尝试异步加载脚本。

 <script src="yourcode.js" async></script>

Looks like the script executes before the DOM loads.
Try loading the script asynchronously.

 <script src="yourcode.js" async></script>

回复收藏 0 原文

还在原地等你 2025-01-04 16:12:32

我在 GitHub 上进行案例研究时使用的文件也遇到了同样的错误。我注意到发生此错误是因为外部 JavaScript 文件声明是在 HTML 文件的字段中定义的。在 HTML 文件中的字段末尾声明外部 JavaScript 文件时，可能导致此问题的情况得到解决。

console.log(document.getElementById("container").innerHTML);
console.log(document.getElementsByClassName("content")[0].innerHTML);
console.log( $(".content")[0].innerHTML );
console.log( $(".content").html() );
console.log( $("#container")[0].innerHTML );

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/style.css">
  <title>jQuery</title>
</head>
<body>
  <div id="container">
    <h3>jQuery Library</h3>
    <p class="content">jQuery is a JS library.</p>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>

I got the same error on a file I used while doing a case study on GitHub. I noticed that this error occurs because external JavaScript file declarations are defined in the <head></head> field in the HTML file. A situation that could cause this issue is resolved when external JavaScript files are declared at the end of the <body></body> field in the HTML file.

console.log(document.getElementById("container").innerHTML);
console.log(document.getElementsByClassName("content")[0].innerHTML);
console.log( $(".content")[0].innerHTML );
console.log( $(".content").html() );
console.log( $("#container")[0].innerHTML );

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/style.css">
  <title>jQuery</title>
</head>
<body>
  <div id="container">
    <h3>jQuery Library</h3>
    <p class="content">jQuery is a JS library.</p>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>

回复收藏 0 原文

橙幽之幻 2025-01-04 16:12:32

如果在 html 文件中找不到 id "status" ，则会显示错误。

在 html 文件中添加 "status" id。例如：

<!DOCTYPE html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="status">
        </div>
        <script type="text/javascript" src="scriptfile.js"></script>
    </body>
</html>

If the id "status" is not found in the html file it shows the error.

Add the "status" id in your html file. For example:

<!DOCTYPE html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="status">
        </div>
        <script type="text/javascript" src="scriptfile.js"></script>
    </body>
</html>

回复收藏 0 原文

半世蒼涼 2025-01-04 16:12:32

我犯了一个错误，我希望其他这样做的人能向我学习。我遇到了同样的错误：

app.js:116 Uncaught (in promise) ReferenceError: holder is not defined
    at getRandomMovieById (app.js:116:3)

我犯的错误是将一个 Javascript 文件用于两个 HTML 文件。我为每个 HTML 创建了单独的文件，效果非常好。

There is a mistake I've done and I hope anyone else doing this will learn from me. I got the same error :

app.js:116 Uncaught (in promise) ReferenceError: holder is not defined
    at getRandomMovieById (app.js:116:3)

The mistake I did was to use one Javascript file for two HTML files. I created individual files for each of my HTML and it worked awesomely.

回复收藏 0 原文

~没有更多了~

关于作者

滥情空心

暂无简介

文章

808 人气

关注发私信

友情链接

文江博客

未捕获的类型错误：无法读取属性“innerHTML”为空

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（12）

更新：

旧答案：

Update:

Old Answer:

关于作者

相关话题

热门标签

推荐作者

卷耳

佚名

℉服软

qq_2gSKZM

凉宸

gyhjy

友情链接

未捕获的类型错误：无法读取属性“innerHTML”为空

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（12）

更新：

旧答案：

Update:

Old Answer:

关于作者

相关话题

热门标签

推荐作者

卷耳

佚名

℉服软

qq_2gSKZM

凉宸

gyhjy

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。