Javascript: работа с изображениями - не могу вызвать метод setAttribute из null

Question

Я пытался изменить свой сайт, http://www.gfcf14greendream.com/, используя javascript для изменения фона в зависимости от времени года (и для устранения проблем чтения с цветом шрифта , что, как только фон меняется работа), работали вокруг простой функции:

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");  
    } 

} 

, который должен изменить фон страницы в зависимости от дня года он включен, модифицируя IMG тег на этой DIV :

<div id="background"> 
    <img id="mainbg" src="http://www.gfcf14greendream.com/images/greentwi.png" class="stretch" alt="" /> 
    </div> 

Но тем не менее, отображается исходный URL-адрес изображения, http://www.gfcf14greendream.com/images/greentwi.png. Хотя через функцию, ее src должен быть http://www.gfcf14greendream.com/images/summerbg.png. Право, когда отладчик получает к этой линии, document.getElementById("mainbg").setAttribute('src', "http://www.gfcf14greendream.com/images/summerbg.png");, я получаю эту ошибку:

Uncaught TypeError: Cannot call method 'setAttribute' of null

Почему это происходит? Зачем нужно, чтобы img-тег для фона был нулевым, если он отображает исходное изображение? Спасибо всем, кто может предоставить мне помощь или предложения.

Answer 1

У вас есть HTML-файл, встроенный в теге «объекта» на странице:

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

и сценарий

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

объявлен как в верхней HTML и подразделам HTML-файлов. И тот, который на самом деле вызван, - это тот, который находится в sub html (функцией onsitelog.html onload).

В вспомогательном HTML, если вам нужно получить доступ к элементу в родительском HTML, вам нужно использовать что-то вроде

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

вместо

document.getElementById('mainbg') 

Так быстро исправить это заменить все

document 

к

window.parent.document 

в greendream.js если элемент вы пытаетесь получить доступ в родительском элементе, как mainbg, и вы можете закомментировать тег сценария в верхней HTML:

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

Это должно исправить вашу текущую ошибку.

Answer 2

Скорее всего, эта функция выполняется до того, как страница загрузится, и, таким образом, до создания этого изображения. Оберните свой код в $ (document) .ready() или в window.onload(), если вам не нужен jQuery.