未捕獲（承諾）類型錯誤：無法讀取 null 的屬性“樣式”

Question

我收到了標題中提到的錯誤，從我所看到的來看，這似乎是一個很受歡迎的問題。

編輯：我知道錯誤意味着我嘗試編輯的元素為空，但它僅在執行 sleep 函數后才變為空。

所以這里發生的事情是我想讓信息顯示在某個 div 上，並且我正在使用如下所示的睡眠功能。 我在緊跟其后的行收到錯誤。 這里的原因可能是什么？ 出於某種原因，在調用 sleep() 函數后，腳本無法識別我想要的元素。 如果您有更好的方法來完成我上面描述的內容，那么歡迎您發表您的建議。

    document.getElementById("box_2_info_" + i).style.display = "contents";
            document.getElementById("box_2_info_" + i).className += " animate-bottom";
            await sleep(3000);
            //error below -->
            document.getElementById("box_2_info_" + i).style.display = "none";

這是我的睡眠功能

    function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
    };

提前致謝，

Answer 1

這是因為您沒有等待 DOM 准備就緒，因此 DOM 元素尚不可用。

如果你更換

document.addEventListener("DOMContentLoaded", run, false);

和

run()

你會得到同樣的錯誤

 (function () { "use strict"; const run = async () => { var i = 0; var el = document.getElementById("box_2_info_" + i); el.style.display = "contents"; el.classList.add("animate-bottom"); console.log("sleeping..."); await sleep(3000); console.log("awake!"); el.style.display = "none"; }; const sleep = (ms) => { return new Promise((resolve) => setTimeout(resolve, ms)); }; document.addEventListener("DOMContentLoaded", run, false); // run(); })();

 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8" /> </head> <body> <div id="box_2_info_0"></div> </body> </html>

Answer 2

所有這些錯誤都意味着您嘗試編輯的屬性，在這種情況下，id 為"box_2_info_" + i的元素不存在。 我會仔細檢查您的標記以確保此屬性存在。

未捕獲（承諾）類型錯誤：無法讀取 null 的屬性“樣式”

問題描述

2 個解決方案

解決方案1
1 已采納 2020-03-31 20:31:53

解決方案2
0 2020-03-31 20:12:24

未捕獲（承諾）類型錯誤：無法讀取 null 的屬性“樣式”

問題描述

2 個解決方案

解決方案1 1 已采納 2020-03-31 20:31:53

解決方案2 0 2020-03-31 20:12:24

解決方案1
1 已采納 2020-03-31 20:31:53

解決方案2
0 2020-03-31 20:12:24