У меня есть следующий код JavaScript, который выполняет ротацию изображений на веб-сайте, над которым я работаю. Он работает правильно в Firefox, но не в Chrome или Safari.

Когда я запускаю консоль сценария в Firebug, она не находит ошибку, но когда я запускаю консоль сценария в Chrome, она возвращается с ошибкой: Uncaught TypeError: Невозможно установить свойство 'src' из неопределенного

Ошибка в строке 38, в нижней части, document [place] .src = new_image ();

Я новичок в понимании javascript, хотя уже довольно давно использую различные сценарии. Я хотел бы знать, что происходит, из-за чего скрипт не работает, и что я могу сделать, чтобы он работал.

var interval = 5; // delay between rotating images (in seconds)  
var random_display = 0; // 0 = no, 1 = yes  
interval *= 1000;  

var image_index = 0;  
image_list = new Array();  
image_list[image_index++] = new imageItem("images/banner/banner-1.jpg");  
image_list[image_index++] = new imageItem("images/banner/banner-1.jpg");  
image_list[image_index++] = new imageItem("images/banner/banner-2.jpg");  
image_list[image_index++] = new imageItem("images/banner/banner-3.jpg");  
image_list[image_index++] = new imageItem("images/banner/banner-4.jpg");  
image_list[image_index++] = new imageItem("images/banner/banner-5.jpg");  
image_list[image_index++] = new imageItem("images/banner/banner-6.jpg");  
var number_of_image = image_list.length;  
function imageItem(image_location) {  
this.image_item = new Image();  
this.image_item.src = image_location;  
}  
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {  
var range = y - x + 1;  
return Math.floor(Math.random() * range) + x;  
}  
function getNextImage() {  
if (random_display) {  
image_index = generate(0, number_of_image-1);  
}  
else {  
image_index = (image_index+1) % number_of_image;  
}  
var new_image = get_ImageItemLocation(image_list[image_index]);  
return(new_image);  
}  
function rotateImage(place) {  
var new_image = getNextImage();  
document[place].src = new_image;  
var recur_call = "rotateImage('"+place+"')";  
setTimeout(recur_call, interval);  
}  

/scripts/animation.js:38 Uncaught TypeError: Невозможно установить свойство 'src' из неопределенного

Спасибо за вашу помощь.

2
BlaineM 2 Июл 2010 в 23:18

3 ответа

Лучший ответ

Ваш код может быть намного проще. Посмотрите его в действии.

Используйте как: rotateImage ("imageid");

var interval = 5; // delay between rotating images (in seconds)  
var random_display = 0; // 0 = no, 1 = yes  
interval *= 1000;

var image_list = [ 
  "images/banner/banner-1.jpg", "images/banner/banner-1.jpg", 
  "images/banner/banner-2.jpg", "images/banner/banner-3.jpg", 
  "images/banner/banner-4.jpg", "images/banner/banner-5.jpg", 
  "images/banner/banner-6.jpg"
];

var image_index     = image_list.length;
var number_of_image = image_list.length;

function generate(x, y) {
    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
}

function getNextImage() {
    if (random_display) {
        image_index = generate(0, number_of_image - 1);
    }
    else {
        image_index = (image_index + 1) % number_of_image;
    }
    return image_list[image_index];
}

function rotateImage(place) {
    document.getElementById(place).src = getNextImage();
    setTimeout(function() {
        rotateImage(place);
    }, interval);
}
2
gblazex 2 Июл 2010 в 19:40

Похоже, вы сможете изменить document[place].src на document.getElementById(place).src, а затем просто передать идентификатор элемента, и он должен работать.

Ранее я не видел, чтобы объект документа использовался в качестве массива, но стандартным является использование метода getElementById, который найдет элемент DOM с указанным вами идентификатором. Если у вас есть правильный объект DOM, остальная часть вашего кода должна работать.

1
Jeff Beck 2 Июл 2010 в 19:22

Что именно вы пытаетесь установить в строке document[place].src = new_image;? Похоже, что вы на самом деле пытаетесь установить свойство элемента HTML (в данном случае изображение). Для этого вы должны использовать document.getElementById("element_id").

На данный момент это то, что происходит: в JavaScript нотация массива преобразуется в точечную нотацию, поэтому document[place] ссылается на свойство document, имя которого содержится в переменной place. Например, если place равен "hello", то document[place] совпадает с document.hello, который является просто свойством объекта document - это просто переменная, которой вы можете назначить все, что вы хотите - но это не часть DOM.

1
casablanca 2 Июл 2010 в 19:31