Question

我有这个函数试图改变img的src属性。这是Javascript：

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

我的谷歌Chrome控制台说文件.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>

是什么给出了？

Answer 1

Javascript在解析后立即执行。

如果您的JS包含在您网页的<head>中，它将在解析文档正文并构建DOM之前执行。

因此，您需要设计代码，以便在加载DOM之前不执行它。您可能希望查看DomContentLoaded事件上的MDN docs。或者，您可以使用众多JavaScript库中的一个，为您提供这些库。

Answer 2

如果chrome表示该元素为null，则为null。也许你在DOM中加载的元素之前调用函数。比如在元素标签之前调用head标签中的函数。

所以尝试这样的事情。

<html>
   <head>
   <script>
      function F () { /*reach element*/ }
   </script>
</head>
<body>
   //The element
</body>
<script>
   F ();
</script>
</html>

获取＆＃34;无法设置属性＆＃39; src＆＃39; of null＆＃34;但元素存在

2 个答案: