How to Print Images From The Web In a For Loop

user_16439643 0
Viewed 367

So I'm trying to print a lot of images automatically via a For Loop. I have three lists with images of a certain type respectively: forest, people and ocean. I want to run through and print every picture in every category. I've tried for hours but I am a complete beginner so I might have missed something silly. This is my code so far:

<script>

const forrest = ["https://cdn.pixabay.com/photo/2020/03/20/13/23/mountain-4950653_1280.jpg", "https://cdn.pixabay.com/photo/2020/01/07/14/18/forrest-4747692_1280.jpg", "https://cdn.pixabay.com/photo/2018/07/30/11/30/landscape-3572374_1280.jpg"] 

const people = ["https://cdn.pixabay.com/photo/2014/09/07/21/52/city-438393_1280.jpg", "https://cdn.pixabay.com/photo/2015/05/15/14/50/concert-768722_1280.jpg", "https://cdn.pixabay.com/photo/2017/08/06/12/06/people-2591874__480.jpg"]

const ocean = ["https://cdn.pixabay.com/photo/2016/11/29/04/19/ocean-1867285_1280.jpg", "https://cdn.pixabay.com/photo/2018/06/13/18/20/wave-3473335__340.jpg", "https://cdn.pixabay.com/photo/2016/12/17/14/33/wave-1913559__340.jpg"]

const type = [forrest, people, ocean] 

function myFunction() {
  for (var i = 0; i < type.length; i++); {
    var list = type[i];
    for (var pictures = 0; pictures <= list.length; pictures++); { 
      var img = document.createElement("img"); 
      img.src = list[pictures]; 
      document.body.appendChild(img); 
    }
  }
}

</script>

I've inserted some example photos in the code above. My photos are also from the web. The code prints the first photo in the first list but not any other photo.

for-loop function html loops javascript
4 Answers

Your for loops are wrong. for (var i = 0; i > type.length; i++) means that the for loop will continue as long as i is greater than type.length. The first iteration is : 0 > 3 so it wont work. You need to check if i is less than type.length. Like : for (var i = 0; i < type.length; i++)

Check here for more information: MDN For LOOP

user_63460630

took me some time to find it, but it is the semicolon after the for loop:

use

for (var i = 0; i < type.length; i++) {

instead of

for (var i = 0; i < type.length; i++); {

that semicolon makes the for loop run 3 times, and if you console.log(i) on the next line you will see that i=3 and that list[i] is undefined

user_20447060

You were placing semicolons after your for loop conditions:

for (var i = 0; i < some_list.length; i++) /* NO SEMICOLON HERE*/ {
    //body
}

Remove them and it works:

const forrest = ["https://cdn.pixabay.com/photo/2020/03/20/13/23/mountain-4950653_1280.jpg", "https://cdn.pixabay.com/photo/2020/01/07/14/18/forrest-4747692_1280.jpg", "https://cdn.pixabay.com/photo/2018/07/30/11/30/landscape-3572374_1280.jpg"] 

const people = ["https://cdn.pixabay.com/photo/2014/09/07/21/52/city-438393_1280.jpg", "https://cdn.pixabay.com/photo/2015/05/15/14/50/concert-768722_1280.jpg", "https://cdn.pixabay.com/photo/2017/08/06/12/06/people-2591874__480.jpg"]

const ocean = ["https://cdn.pixabay.com/photo/2016/11/29/04/19/ocean-1867285_1280.jpg", "https://cdn.pixabay.com/photo/2018/06/13/18/20/wave-3473335__340.jpg", "https://cdn.pixabay.com/photo/2016/12/17/14/33/wave-1913559__340.jpg"]

const type = [forrest, people, ocean] 

function myFunction() {
  for (var i = 0; i < type.length; i++) {
    var list = type[i];
    for (var pictures = 0; pictures < list.length; pictures++) { 
      var img = document.createElement("img"); 
      img.src = list[pictures]; 
      document.body.appendChild(img); 
    }
  }
}
debugger;
myFunction();

user_68313410

Try this :

const images = [ ...forrest, ...people, ...ocean]
let imagesList = images.map((img, index) => <img src={img.src}  />)
document.body.appendChild(imagesList);
user_68932670
Related