Изменение атрибута Img с заполненной ошибкой массива

Question

Я довольно новичок в JavaScript и с некоторым трудом понимаю, почему этот небольшой бит кода работает неправильно. В функции «change (slide)», если я использую функцию alert() для отображения любого из переданного массива, отображается ожидаемый результат. Однако, когда я хочу присвоить результат атрибута Src моего образа я получаю сообщение об ошибке с

Uncaught TypeError: Не удается прочитать свойство «SetAttribute» в нуль неперехваченным TypeError: Не удается прочитать свойство «0» неопределенной

Я ищу наиболее подходящий и эффективный способ присвоить свой текст src.

function loadSlider(){ 
    var stocker = new Array(); 

    for(var i = 0; i<15; i++){ 
     stocker.push("C:\\Users\\Rickep\\random_pics\\"+i+".jpg"); 

    } 

    return stocker; 
} 

var slider = new Array(); 
slider = loadSlider(); 
change(slider); 



function change(slide){ 
document.getElementById('imageToFill').setAttribute('src',slide[1]); 

} 


</script> 

<div id="filler"> 
    <img id="imageToFill"></img> 
</div> 

Answer 1

Вы стреляете change(slider); перед созданием тега img.

добавление onload="change(slider);" к тегу вашего тела (и удаление текущего вызова) должно быть исправлено.

Если вы используете JQuery, это также может быть $('document').ready(function(){change(slider);}); вместо текущего вызова для изменения.

посмотрите на setInterval для фактического обмена изображениями.

var currentSlide = 0; 
$('document').ready(function(){ 
    setInterval(change, 5000); // 5 seconds 
}); 

function change(){ 
    currentSlide = (currentSlide+1) % slider.length; 
    document.getElementById('imageToFill').setAttribute('src',slider[currentSlide]); 
}