Error undefined is not an object (evaluating) in a collage script

Question

I ask you to help understand the error that occurs when working with the collage photo script described in Habré ( https://habrahabr.ru/sandbox/78613/ )

var collage = document.getElementById('collage'); var images = collage.getElementsByTagName('img'); //Маленький набор опций: averageRowHeight - примерная высота строки; gap - отступы между картинками; var options = {averageRowHeight: 255, gap: 3}; var widths = [], rows = [], rowNumber = 0, index = 0, k = 0; //Записываем в массив ширину каждой картинки при одинаковой высоте for(var i = 0; i < images.length; i++){ widths.push(Math.round(images[i].width / images[i].height * options.averageRowHeight)); } //Функция суммы элементов массива Array.prototype.sum = function(){ return this.reduce( function(prev,current){ return +current + prev; }, 0); } //Разбиение оизображений на строки обичным деление общей ширины всех картинок на ширину контейнера while(rowNumber < Math.ceil(widths.sum() / collage.clientWidth)){ rows[rowNumber] = []; //Как только общая ширина картинок превысила ширину контейнера переходим на следующую строку while(index < widths.length && rows[rowNumber].sum()+(rows[rowNumber].length * options.gap) < collage.clientWidth + options.gap){ rows[rowNumber].push(widths[index]); index++; //Если на последнюю строку осталось одно изображение, то дописываем его в "предпоследнюю" if(index == widths.length - 1){ rows[rowNumber].push(widths[index]); rowNumber++; break; } } rowNumber++; } index = 0; //Непосредственно изменение масштаба картинок (пропорционально, без обрезания изображений) console.log(rows); console.log(rows.length); for(var i = 0; i < rows.length; i++){ for(var j = 0; j < rows[i].length; j++){ // Если ширина строки больше/меньше ширины контейнера - соответственно // уменьшаем/увеличиваем до ширины контейнера с учетем отступов между картинками k = (collage.clientWidth - ((rows[i].length - 1) * options.gap)) / rows[i].sum(); images[index].style.width = rows[i][j] * k + 'px'; images[index].style.height = k * options.averageRowHeight + 'px'; if(j < rows[i].length - 1) images[index].style.marginRight = options.gap + 'px'; if(i < rows.length - 1) images[index].style.marginBottom = options.gap + 'px'; index++; } }

In the Safari browser under mac (possibly in some other), the error undefined is not an object (evaluating 'rows[i].length') on the drain 41

Because of it, Safari blocks the loading of the entire page and the execution of other scripts on it.

Console log:

HTML:

  <div id="collage" class="clear"> <a href="/raspoznavaniye-gribov/16290/668ee69f0ad038bbecd791d4c66f0459.jpg" title="480px x 640px" data-gallery=""> <img src="/raspoznavaniye-gribov/16290/668ee69f0ad038bbecd791d4c66f0459.jpg" width="480" height="640"> </a> <a href="/raspoznavaniye-gribov/16290/89c9f637dfe608915c0b40fe0b022246.jpg" title="640px x 480px" data-gallery=""> <img src="/raspoznavaniye-gribov/16290/89c9f637dfe608915c0b40fe0b022246.jpg" width="640" height="480"> </a> <a href="/raspoznavaniye-gribov/16290/e2da464b450dd4942d15df4d6d5dc0b2.jpg" title="640px x 480px" data-gallery=""> <img src="/raspoznavaniye-gribov/16290/e2da464b450dd4942d15df4d6d5dc0b2.jpg" width="640" height="480"> </a> </div>

you in the while missed the assignment of some elements of the rows array due to errors in the logic of the rowNumber++; calls rowNumber++;
I tried, it seems safari does not like that there is an array in the array
add the console to the question after calling console.log(rows);

Answer 1 · 2017-01-25T14:49:28

In the while missed assigning some elements of the rows array due to errors in the logic of rowNumber++; calls rowNumber++; .

Namely, the assignment of an element with index 1 is missing.

It is striking: rowNumber++; in internal and external while loops - which causes a rowNumber index to rowNumber over a single value if an internal if is executed.

Just in case: break; command break; in your code, only one loop interrupts - the one in which it is directly located.

in internal and external while loops - which causes a rowNumber index to rowNumber over a single value if an internal if is executed.
@Igor, and if break has a label, then it can interrupt several cycles
@Igor and perhaps this is var widths = [], rows = [], rowNumber = 0, index = 0, k = 0;
@ LeonidOzerny is not, rows = [], this is the creation of an array.

Vadim Ovchinnikov 8.521 3 gold marks 26 silver marks 64 bronze marks · Answer 2 · 2017-01-25T14:41:12

Perhaps there is no div on the page with id="collage"

Vadim Ovchinnikov

8.521 3 gold marks 26 silver marks 64 bronze marks

OPEX_by

13 2 bronze marks

No, he is there - Leonid
html listing would be nice - OPEX_by
Added html code to the question - Leonid

|

Error undefined is not an object (evaluating) in a collage script

2 answers 2

More articles: