getElementById () всегда показывает NULL-статус - PullRequest
Новая
       5

getElementById () всегда показывает NULL-статус

3 голосов
/ 15 декабря 2011

Я прохожу уроки JavaScript о обработчиках событий, в то же время я начинаю очень простой, который getElementById(). Ниже мой код HTML и JavaScript. В следующем коде также есть тег images, но я новый пользователь SO, поэтому они не позволили мне опубликовать их точно. Поэтому считайте теги src полностью жалобой. 

<div class="considerVisiting">
  <img src="images/bq-twitter" id="mainImage" alt="BeQRious Twitter"> 
</div>

и вот код JavaScript: 

var myImage = document.getElementById("mainImage");
var imageArray = [images/1-btn, images/download-as-you-like];
var imageIndex = 0;

function changeImage() {

  myImage.setAttribute("src",imageArray[imageIndex]);
  imageIndex++;

  if (imageIndex >= imageArray.length) {
    imageIndex=0;
  }
}

setInterval(changeImage, 5000);

Этот код будет изменять картинку MainImage каждые 5 секунд. Но проблема, с которой я сталкиваюсь, заключается в том, что когда я запускаю этот скрипт с помощью FireBug в Mozilla, он говорит: 

 > Error : myImage is Null

и по сценарию ничего не происходит.

Ответы [ 3 ]

0 голосов
/ 15 декабря 2011

.getElementById() должен возвращать значение NULL, если не существует элемента с указанным идентификатором, поэтому поведение, которое вы видите, является правильным, если ваш скрипт выполняется до того, как рассматриваемый элемент будет проанализирован.Просто предположение, но есть ли ваш сценарий в <head> вашего документа?Скрипт (в том числе и в заголовке) запускается по мере того, как браузер обнаруживает его при анализе документа сверху вниз.Ваш скрипт может получить доступ только к тем элементам, которые уже были проанализированы браузером, т. Е. К элементам выше / ранее в документе, поэтому, если вы переместите раздел <script> в нижнюю часть тела, это (очевидно) будет после всех ваших элементови сможет получить к ним доступ.

Другой способ сделать это - запустить код «onload» или «document.ready» документа.«onload» - это событие, которое браузер выполнит только после загрузки всего документа.

Единственное, что выскочило как явно неправильное, это строка: 

var imageArray= [images/1-btn,images/download-as-you-like];

Iпредположим, что это должен быть массив строк, и так должно быть: 

var imageArray= ["images/1-btn", "images/download-as-you-like"];
0 голосов
/ 15 декабря 2011

В вашем коде значения в массиве должны быть строковыми литералами, т.е. 

> var imageArray = [images/1-btn, images/download-as-you-like];

должно быть: 

var imageArray = ['images/1-btn', 'images/download-as-you-like'];

Кроме того, не используйте 'setAttribute', если выесть веская причина.Вместо этого используйте свойства DOM, так как setAttribute содержит ошибки и в некоторых случаях ненадежен.Также более естественно читать, поскольку вы действительно пытаетесь установить свойство объекта DOM, а не атрибута разметки HTML, поэтому: 

> myImage.setAttribute("src",imageArray[imageIndex]);

должно быть: 

myImage.src = imageArray[imageIndex];

Также: 

> if (imageIndex >= imageArray.length) {
>   imageIndex=0;
> }

можно управлять с помощью оператора модуля%: 

  imageIndex = imageIndex % imageArray.length;

Вся функция может быть уменьшена до: 

function changeImage() {
  myImage.src = imageArray[index++ % imageArray.length];
}

Вы также можетеизбавиться от глобальных переменных с помощью замыканий: 

var changeImage = (function() {

    var myImage = document.getElementById("mainImage");
    var imageArray = ['images/1-btn', 'images/download-as-you-like'];
    var imageIndex = 0;

    return function () {
        myImage.src = imageArray[index++ % imageArray.length];
    }
}());

Однако вы должны запустить приведенный выше код после элемент с идентификатором mainImage существует в DOM (например, вы не можете запустить его из головы).Вероятно, лучше вызвать функцию и передать идентификатор, используя window.onload .

0 голосов
/ 15 декабря 2011

Изменение: 

<img src="images/bq-twitter" **id="mainImage"** alt="BeQRious Twitter" />

Кому: 

<img src="images/bq-twitter" id="mainImage" alt="BeQRious Twitter" />

** не действительны.

...