Получаване Не може да се зададе свойството 'src' на null, но елементът съществува

Имам тази функция, която се опитва да промени свойството src на img. Ето го Javascript:

function transition(){
    document.getElementById("firstfirst").src = marray[currArrayValue];
    currArrayValue++;
    if(currArrayValue == array.length-1){
        currArrayValue = 0;
    }
    setTimeout(transition(), 1000);
}

Моята конзола на Google Chrome казва, че document.getElementById("firstfirst") не съществува, но определено съществува. Ето HTML:

<div id="banners-container">
    <div id="banners">
        <img src="images/banners/top-banner-one.png" id="firstfirst" alt="Subscribe now to get access to thousands of vintage movies!" border="0">
    </div>
</div>

Какво дава?


person Tony Friz    schedule 18.01.2013    source източник
comment
Кога извиквате функцията?   -  person SLaks    schedule 18.01.2013
comment
Това setTimeout() обаждане трябва да бъде setTimeout(transition, 1000);   -  person Pointy    schedule 18.01.2013
comment
@SLaks Мисля, че е ясно, че се извиква, преди елементът да е на страницата, защото в противен случай рекурсията би се взривила.   -  person Pointy    schedule 18.01.2013
comment
Можете ли да възпроизведете това в JsFiddle?   -  person 11684    schedule 18.01.2013
comment
Извиквате ли функцията след показване на изображение? или това извикване на javascript се извършва преди тялото да се зареди напълно?   -  person Hanky Panky    schedule 18.01.2013
comment
Благодаря ти, Pointy, това, което каза, го оправи.   -  person Tony Friz    schedule 18.01.2013


Отговори (2)


Javascript се изпълнява веднага след като бъде анализиран.

Ако вашият JS е включен в <head> на вашата уеб страница, той ще бъде изпълнен преди тялото на документа да бъде анализирано и DOM да бъде изграден.

Като такъв, трябва да проектирате кода си така, че да не се изпълнява, докато DOM не бъде зареден. Може да искате да погледнете MDN документи за събитието DomContentLoaded. Като алтернатива можете да използвате една от многото библиотеки на JavaScript, които завършват това вместо вас.

person Dancrumb    schedule 18.01.2013
comment
Благодаря. Поправих го, като промених setTimeout(transition()... на setTimeout(transition, както предложи Pointy. - person Tony Friz; 18.01.2013

ако chrome каже, че елементът е нулев, той е нулев. Може би извиквате функция преди елемента, зареден в DOM. като извикване на функцията в тага head преди тага на елемента.

така че опитайте нещо подобно.

<html>
   <head>
   <script>
      function F () { /*reach element*/ }
   </script>
</head>
<body>
   //The element
</body>
<script>
   F ();
</script>
</html>
person Onur Topal    schedule 18.01.2013