无法调用带有数组块的函数,未定义

I am trying to dynamically populate a shelf with books. I split an array into many arrays depending of the number of books on the shelf. Then I call a function create which creates a shelf and populates every shelf according to a number of books. The error I have is "create(arrayOfArrays[y]) is undefined". The function doesn't want to be called with my arrays. Link to my pen

var arrayOfArrays = [];
var arr = ['1.png','2.png','3.png','4.png','5.png','6.png']

 for (var i=0; i<arra.length; i+=numberOfBooks) {
    arrayOfArrays.push(arra.slice(i,i+numberOfBooks));
  }

 for(y=0; y<arrayOfArrays.length; y++){
     create(arrayOfArrays[y]) 
   }

function create(arra) { 
   var shelf = document.createElement('div');
   shelf.className = "shelf";
        var base = document.createElement('div');
        var shelfBackground = document.createElement('div');      
        var shelfImages = document.createElement('div');

        shelfBackground.className = "shelf-background";
        base.className = "base";
        shelfImages.className = "shelf-images";        
        shelfBackground.appendChild(base);
        shelf.appendChild(shelfBackground);
        shelf.append(shelfImages);
        wrap.appendChild(shelf);        

         arra.forEach(function(i, arra) {
            var shelfImage = document.createElement('div');
             shelfImage.className = 'shelf-image';
             var image = document.createElement('img');
             image.src = arra[i]
             shelfImage.append(image);
             shelfImages.append(shelfImage);
        }); 
   }
评论