Javascript onload 不起作用(“uncatch TypeError:无法将属性'document

Javascript onload isn't working ("Uncaught TypeError: Cannot set property 'document.body' of null ")

本文关键字：属性 document 不起作用 onload TypeError uncatch Javascript      更新时间：2023-09-26

这是我的代码：

Javascript：

document.body.onload = function() {
    function UP() {//Ẩn hiện nút UP
        if(window.pageYOffset > window.innerHeight)
            document.getElementById('UP').style.display = "block";
    }
}

标签：

<button id="UP" onclick="toTop(350);"></button>

CSS 样式：

#UP {display: none;}

我的想法是当我向下滚动时，会出现向上按钮。但不知道为什么，它不会，它甚至返回错误："未捕获的类型错误：无法设置空的属性'document.body'"。当然，我确实像这样更改了其他脚本：

function getReady() {
    UP();
}
function UP() {//Ẩn hiện nút UP
    if(window.pageYOffset > window.innerHeight)
        document.getElementById('UP').style.display = "block";
}

标签：

<body onload="getReady();">
    <button id="UP" onclick="toTop(350);"></button>
</body>

更可怕了。当我加载网站时，我没有看到身体标签的加载属性，浏览器也没有为我返回任何错误。

其他一些信息：我在两边开发，Cr和FF，这一切都说明了同样的问题。我正在研究Wordpress源代码。

为了澄清@laruiss并解释发生了什么，让我们从您的代码开始：

/* body.onload is not recommended, window.onload is. But thats not the main issue*/
window.onload = function() {
    /* You are declaring a function here. Very important: 
     * its a declaration, NOT a function call 
     */
    function UP() {
        if(window.pageYOffset > window.innerHeight)
            document.getElementById('UP').style.display = "block";
    }
    /* So if you want to execute ('call') your function, you have two options:
     * - Remove the declaration around your function aka `function UP(){` and the ending `}`
     * - Call the function here. To make your code work instantly, lets do that.
     */
    UP();
}

使用 onload 事件时，您实际上是在做正确的事情。没错，不建议在你的 DOM 中实际这样做，但它应该可以工作。DOM 加载的最大问题是主观的。一些浏览器会在内容进入后立即考虑加载正文，其他浏览器会等待图像，而较旧的IE版本不会全部触发！因此，如果您使用推荐的window.onload，您应该没问题，因为它会在 DOM 准备就绪后立即触发。您可能要考虑另一个很棒的事件，这是 DOMContentLoaded ，但它没有得到广泛的支持。这里还有更多（通过点击）：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload

我还想补充一点，即使您将按钮显示，它也没有内容，因此它可能显示为空，或者如果您正在重置按钮样式，则根本不显示。要记住的事情。

您的代码存在一些问题：

  • document.body.onload应该替换为window.onload，如评论中所述
  • 在 Onload 函数中，您定义了一个函数，但您不调用它...

所以 

document.body.onload = function() {
    function UP() {//Ẩn hiện nút UP
        if(window.pageYOffset > window.innerHeight)
            document.getElementById('UP').style.display = "block";
    }
}

应替换为：

window.onload = function up() { // Could be anonymous, of course, but should not
    if(window.pageYOffset > window.innerHeight)
        document.getElementById('UP').style.display = "block";
}
  • 最后但并非最不重要的一点是，您不应该使用 HTML 属性on<Events>。

回答您的问题"我的想法是当我向下滚动时，会出现向上按钮。 我认为您应该在可滚动容器div 上注册"滚动"事件。 "body/window.onload"函数只会触发一次，因此它不会满足要求。这是您可以继续的方法（工作小提琴） 

<div id="container" onscroll="handleScroll(this)">
    <button id="UP" onclick="toTop(350);">Go to Top</button>
     Scroll me</br>....scrollable content

爪哇语

function handleScroll (obj) {
    var displayVal = "block";
    if (obj.scrollTop == "0") {
        displayVal = "none";
    }
    document.getElementById('UP').style.display = displayVal;
};
相关文章：