Невозможно установить свойство 'src' of null

Question

Я пытаюсь повернуть изображение с помощью javascript, и я пытался найти код, который я нашел на сайте adobes, который делает то, что я искал. Когда я запускаю его он дает мне ошибку: неперехваченным TypeError: Невозможно установить свойство «SRC» нулевых

Он не устает повторять каждые 5 секундный интервал, который является количество времени между каждым изображением

Вот JavaScript:

(function() { 
     var rotator = document.getElementById('rotator'); // change to match image ID 
     var imageDir = 'images/';       // change to match images folder 
     var delayInSeconds = 5;       // set number of seconds delay 
     // list image names 
     var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg']; 

     // don't change below this line 
     var num = 0; 
     var changeImage = function() { 
      var len = images.length; 
      rotator.src = imageDir + images[num++]; 
      if (num == len) { 
       num = 0; 
      } 
     }; 
     setInterval(changeImage, delayInSeconds * 1000); 
    })(); 

и вот HTML для изображения:

<img src="images/image1.jpg" alt="rotating image" width="400" height="300" id="rotator" /> 

это показывает image1.jpg, но не повернуть его. Есть ли что-то явно очевидное, что я не вижу? Не удивите меня!

Спасибо всем, кто может предложить совет.

Answer 1

Когда в head (смотреть на консоли):

http://jsfiddle.net/m2wce/

Это происходит потому, что вы объявляете закрытия и выполнения сразу. Когда вы выполняете его в head, DOM не готов, и этот тег img еще не существует.

Когда в body, после ссылочного img, он работает:

http://jsfiddle.net/m2wce/1/

Answer 2

Ваш скрипт загружается до тела вашей страницы, так что rotator элемент не найден. Удалите var rotator = ... линию и поместить его в changeImage функции вместо:

(function() { 
    var rotator; 
    var rotatedImageId = 'rotator';   // change to match your HTML 
    var imageDir = 'images/'; 
    var delayInSeconds = 5; 
    // list image names 
    var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg']; 

    // don't change below this line 
    var num = 0; 
    var changeImage = function() { 
     if (!rotator) 
      rotator = document.getElementById(rotatedImageId); 
     if (!rotator) 
      return; 

     var len = images.length; 
     rotator.src = imageDir + images[num++]; 
     if (num == len) { 
      num = 0; 
     } 
    }; 
    setInterval(changeImage, delayInSeconds * 1000); 
})(); 

Answer 3

Вам нужно разместить этот код после того, как ваш дом готовится. внутри $(document).ready() или по телефону window.onload. как:

window.onload=function(){ 
(function() { 
    var rotator = document.getElementById('rotator'); // change to match image ID 
    var imageDir = 'images/';       // change to match images folder 
    var delayInSeconds = 5;       // set number of seconds delay 
    // list image names 
    var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg']; 

    // don't change below this line 
    var num = 0; 
    var changeImage = function() { 
     var len = images.length; 
     rotator.src = imageDir + images[num++]; 
     if (num == len) { 
      num = 0; 
     } 
    }; 
    setInterval(changeImage, delayInSeconds * 1000); 
})(); 

Если вы поместите этот код внутри anynomous функции внутри головы (как вы это делали), то он не сможет загрузить этот элемент изображения из Dom, потому что Dom не будет полностью загружен в тот момент.

Answer 4

Я тоже встречал эти проблемы. Вы можете сделать document.getElementById(rotatedImageId), прежде чем использовать эту функцию. Другим словом, вы можете определить ротатор для gobal. Вот как я решил эту проблему.