//Get the body of where the tiles will be displayed const mainBody = document.getElementById('fabricsBody'); //Tiles are stored in an array, first element is the title, the second is the image, and the third is the pdf var titles = [ "D 0124", "website_pictures/fabrics_jpgs/D_0124.jpg", "pdfs/fabrics_pdfs/D_0124.pdf", "D 0125", "website_pictures/fabrics_jpgs/D_0125.jpg", "pdfs/fabrics_pdfs/D_0125.pdf", "D 0126", "website_pictures/fabrics_jpgs/D_0126.jpg", "pdfs/fabrics_pdfs/D_0126.pdf", "D 0127", "website_pictures/fabrics_jpgs/D_0127.jpg", "pdfs/fabrics_pdfs/D_0127.pdf", "D 0128", "website_pictures/fabrics_jpgs/D_0128.jpg", "pdfs/fabrics_pdfs/D_0128.pdf", "D 0129", "website_pictures/fabrics_jpgs/D_0129.jpg", "pdfs/fabrics_pdfs/D_0129.pdf", "D 0130", "website_pictures/fabrics_jpgs/D_0130.jpg", "pdfs/fabrics_pdfs/D_0130.pdf", "D 0131", "website_pictures/fabrics_jpgs/D_0131.jpg", "pdfs/fabrics_pdfs/D_0131.pdf", "D 0132", "website_pictures/fabrics_jpgs/D_0132.jpg", "pdfs/fabrics_pdfs/D_0132.pdf", "D 0133", "website_pictures/fabrics_jpgs/D_0133.jpg", "pdfs/fabrics_pdfs/D_0133.pdf", "D 0134", "website_pictures/fabrics_jpgs/D_0134.jpg", "pdfs/fabrics_pdfs/D_0134.pdf", "D 0135", "website_pictures/fabrics_jpgs/D_0135.jpg", "pdfs/fabrics_pdfs/D_0135.pdf", "D 0136", "website_pictures/fabrics_jpgs/D_0136.jpg", "pdfs/fabrics_pdfs/D_0136.pdf", "D 0137", "website_pictures/fabrics_jpgs/D_0137.jpg", "pdfs/fabrics_pdfs/D_0137.pdf" ]; //get the length of how many tiles there are var len = titles.length; //Initialize the table var html = ""; //Loop through the titles array and add the tiles to the table //Each tile utilizes 3 array slots in the title, image, and pdf link so the loop increments by 3 for (var i = 0; i < len; i += 3) { //End off and start a new row every 3 tiles if (i % 9 == 0) { html += ""; } html += ``; } //CLose the final row and end the table html += "



"; //Write the table to the body mainBody.innerHTML = html;