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

Question

I have a Javascript in my header that calls an external server to retrieve some information, like this:

$.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 
        });         

Then in the body I have a warning that should pop up in case the GET request failed:

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

Problem: the javascript is in the header and I can't change the "warning" div because it has not been created yet. If I use document.getElementById("warning").style.display='block'; I get an error message saying it is null.

So how do I use the .fail() part of the jquery GET function to make the warning div appear (that is created later) in case the GET function has failed? Or is that not possible? And some 'solution' I tried (don't remember what exactly) even delayed the loading of the whole page. I'd like to avoid that as well.

Thank you for helping me out.

Answer 1

You should hide your html element initialy

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

And you can call show() method to display hidden element when get request failed

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

Answer 2

Your javascript is trying to execute and look for things before the DOM has loaded. You can solve this problem by making sure your javascript only fires when the DOM is ready. In jQuery you do that like this:

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

The native javascript version of this is much more complicated so I won't post that here. However you could also wait for the entire page to load before executing the code like so:

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