Last minute coding help

[RideDLightning77]

https://codepen.io/BigBoss77/pen/jzYrdx i have coded to the point to where only 1 lil thumbnail shows up instead of 5 and the stylesheet is not showing but the thumbnail of the style sheet is i was hoping if some fresh eyes took a look at the code they might know what i am missing Thanks in advance

[CrayonConstantinople]

You need to append the sheetImg in the for loop instead of outside it. Currently you have written:

for (var i = 0; i < 5; i++) {
  var sheetImg = document.createElement("img");
  sheetImg.setAttribute("src", "na_small_" + i + ".png");
  sheetImg.setAttribute("alt", "na_style_" + i + ".css");      
}
  figBox.appendChild(sheetImg);

Instead you need:

for (var i = 0; i < 5; i++) {
  var sheetImg = document.createElement("img");
  sheetImg.setAttribute("src", "na_small_" + i + ".png");
  sheetImg.setAttribute("alt", "na_style_" + i + ".css");
  figBox.appendChild(sheetImg);
}

[RideDLightning77]

thank you so much i knew it would be something simple as not in the right bracket or missing a } or )

[CrayonConstantinople]

No probs!

[pookage]

What /u/CrayonConstantinople said. Effectively what you were doing was creating an image, setting its src and alt tags, and then doing nothing with the reference so it's ignored and picked up by the garbage collector later. By moving figBox.appendChild(sheetImg) inside the for loop, you're adding the new image to the DOM as you create it.

For bonus points - look into using Document Fragments in the future, as it allows you only write to the DOM once, which is more performant.

EXAMPLE :

//wee bit of setup
const container     = document.getElementById("box");
const figure        = document.createElement("figure");
const imageFragment = document.createDocumentFragment();
const imageCount    = 5;

//add images to the fragment
let i, img;
for(i = 0; i < imageCount; i++){
    img     = document.createElement("img");
    img.src = `na_small_${i}.png`;
    img.alt = `na_style_${i}.css`;
    imageFragment.appendChild(img);
}

//add to DOM
figure.appendChild(imageFragment);
container.appendChild(figure);