Javascript: working with images - cannot call method 'setAttribute' of null

Question

I've been trying to modify my site, http://www.gfcf14greendream.com/ , by using javascript to change the background depending on the seasons (and to eliminate reading problems with the font color, that as soon as the background changing works), worked around a simple function:

function setSeasonTheme() {
    var today = new Date();
    var first = new Date(today.getFullYear(), 0, 1);
    var dayYear = Math.round(((today - first) / 1000 / 60 / 60 / 24) + .5, 0);

    if (dayYear >=   1 && dayYear < 80)
    {
        document.getElementById("mainbg").setAttribute('src', "http://www.gfcf14greendream.com/images/winterbg.png");       
    }
    if (dayYear >=  80 && dayYear < 172)
    {
        document.getElementById("mainbg").setAttribute('src', "http://www.gfcf14greendream.com/images/springbg.png");       
    }
    if (dayYear >= 172 && dayYear < 264)
    {   
        document.getElementById("mainbg").setAttribute('src', "http://www.gfcf14greendream.com/images/summerbg.png");       
    }
    if (dayYear >= 264 && dayYear < 355)
    {
        document.getElementById("mainbg").setAttribute('src', "http://www.gfcf14greendream.com/images/fallbg.png");     
    }
    if (dayYear >= 355 && dayYear <= 366)
    {
        document.getElementById("mainbg").setAttribute('src', "http://www.gfcf14greendream.com/images/winterbg.png");       
    }

}

which should change the background of the page according to the day of the year it is on, modifying the img tag on this div:

<div id="background">
    <img id="mainbg" src="https://i.stack.imgur.com/USDq5.png" class="stretch" alt="" />
  </div>

But still, the original URL for the image, http://www.gfcf14greendream.com/images/greentwi.png , appears. While through the function, its src should be http://www.gfcf14greendream.com/images/summerbg.png . Right when the debugger gets to this line, document.getElementById("mainbg").setAttribute('src', "http://www.gfcf14greendream.com/images/summerbg.png"); , I get this error:

Uncaught TypeError: Cannot call method 'setAttribute' of null

Why is this happening? Why should the img tag for the background be null if it displays the original image? Thank you for anyone who can provide me with help or suggestions.

Answer 1

You have a html file embedded in the 'object' tag in your page:

<object type="text/html" data="http://www.gfcf14greendream.com/thesitelog.html"...>

And the script

http://www.gfcf14greendream.com/JS/greendream.js

is declared in both top html and sub html files. And the one actually got invoked is the one in the sub html (by thesitelog.html's body onload function).

In the sub html, if you need to access element in the parent html, you need to use something like

window.parent.document.getElementById('mainbg')

instead of

document.getElementById('mainbg')

So a quick fix is to replace all

document

to

window.parent.document

in greendream.js if the element you try to access is in the parent element like mainbg, and you can comment out the script tag in the top html:

<!--script type="text/javascript" src="http://www.gfcf14greendream.com/JS/greendream.js"></script-->

This should fix your current error.

Answer 2

Most likely, this function is executing before the page loads, and thus before that image is created. Wrap your code in a $(document).ready() or in window.onload() if you don't care for jQuery.