Javascript：如果jquery GET失败，则更改CSS元素

Question

我的标题中有一个Javascript调用外部服务器来检索一些信息，如下所示：

$.getJSON("https://domain.tld/json/", function (something) {
            var results = //stuff that formats the result, not relevant here;
            window.$info = results;
    }).fail(function(){
        // here's where I need the code to make the warning appear 
        });         

然后在正文中我有一个警告，如果GET请求失败，应该弹出：

<div id="warning">Warning text</div>

问题：javascript位于标题中，我无法更改“警告”div，因为它尚未创建。 如果我使用document.getElementById("warning").style.display='block'; 我收到一条错误消息，说它是null。

那么如何使用jquery GET函数的.fail（）部分来显示警告div（稍后创建）以防GET函数失败？ 或者那是不可能的？ 我试过的一些“解决方案”（不记得究竟是什么）甚至延迟了整个页面的加载。 我也想避免这种情况。

谢谢你帮助我。

Answer 1

你应该首先隐藏你的html元素

<div id="warning" style="display:none;">Warning text</div>

并且您可以调用show（）方法在get请求失败时显示隐藏元素

$("#warning").show();

Answer 2

你的javascript试图在DOM加载之前执行并查找内容。 您可以通过确保您的javascript仅在DOM准备就绪时触发来解决此问题。 在jQuery中，你这样做：

$(document).ready(function(){
  //your code here
});

这个本机javascript版本要复杂得多，所以我不会在这里发布。 但是，您也可以在执行代码之前等待整个页面加载，如下所示：

window.onload = function(){
  //your code here
}