javascript - 无法使用数组 block 调用函数，未定义

Question

我正在尝试动态地用书籍填充书架。我根据书架上书籍的数量将一个数组分成许多数组。然后我调用一个函数 create，它创建一个书架并根据书籍数量填充每个书架。我遇到的错误是“create(arrayOfArrays[y]) 未定义”。该函数不想用我的数组调用。 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);
        }); 
   }

Answer 1

问题出在 foreach 循环上:

我在这里为您修复了它:

 arra.forEach(function(element,i) { // The first argument is the element, second is the index
    var shelfImage = document.createElement("div");
    shelfImage.className = "shelf-image";
    var image = document.createElement("img"); 
    image.src = element; // function receives the current element of the array (not the whole array)
    shelfImage.append(image);
    shelfImages.append(shelfImage);
  });