简体   繁体   中英

Need help looping through captions attached to an image

i need to Create a for loop with a counter that goes from 0 to less the length of the captions array in increments of 1. With each iteration, add the following text to the value of the htmlCode variable:

<figure>
<img alt='' src='slidei.jpg' />
<figcaption>caption[i]</figcaption>
</figure>

where i is the value of the counter for that iteration and captions[i] is the corresponding element from the captions array. Im having issues getting through this and ive been stuck on it for days if anyone is able to help me

    let captions = new Array(14);
captions[0] = "International Space Station fourth expansion [2009]";
captions[1] = "Assembling the International Space Station [1998]";
captions[2] = "The Atlantis docks with the ISS [2001]";
captions[3] = "The Atlantis approaches the ISS [2000]";
captions[4] = "The Atlantis approaches the ISS [2000]";
captions[5] = "International Space Station over Earth [2002]";
captions[6] = "The International Space Station first expansion [2002]";
captions[7] = "Hurricane Ivan from the ISS [2008]";
captions[8] = "The Soyuz spacecraft approaches the ISS [2005]";
captions[9] = "The International Space Station from above [2006]";
captions[10] = "Maneuvering in space with the Canadarm2 [2006]";
captions[11] = "The International Space Station second expansion [2006]";
captions[12] = "The International Space Station third expansion [2007]";
captions[13] = "The ISS over the Ionian Sea [2007]";

var htmlCode = "";

for (let i = 0; i < captions.length; i++) {
  <figure>
    <img alt='' src='slidei.jpg' />
    <figcaption>htmlCode += captions[i]</figcaption>
  </figure>
}

document.getElementById(gallery).innerHTML = htmlCode;

Two points need to pay attention:

  1. Using document.getElementById('gallery') instead of document.getElementById(gallery)
  2. You can use Template_literals to store the interate values and finally assign it to gallery outside loop

 let captions = new Array(14); captions[0] = "International Space Station fourth expansion [2009]"; captions[1] = "Assembling the International Space Station [1998]"; captions[2] = "The Atlantis docks with the ISS [2001]"; captions[3] = "The Atlantis approaches the ISS [2000]"; captions[4] = "The Atlantis approaches the ISS [2000]"; captions[5] = "International Space Station over Earth [2002]"; captions[6] = "The International Space Station first expansion [2002]"; captions[7] = "Hurricane Ivan from the ISS [2008]"; captions[8] = "The Soyuz spacecraft approaches the ISS [2005]"; captions[9] = "The International Space Station from above [2006]"; captions[10] = "Maneuvering in space with the Canadarm2 [2006]"; captions[11] = "The International Space Station second expansion [2006]"; captions[12] = "The International Space Station third expansion [2007]"; captions[13] = "The ISS over the Ionian Sea [2007]"; var htmlCode = ""; for (let i = 0; i < captions.length; i++) { htmlCode += `<figure> <img alt='' src='slidei.jpg' /> <figcaption>htmlCode += `+captions[i]+`</figcaption> </figure>` } document.getElementById('gallery').innerHTML = htmlCode;
 <div id="gallery"></div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM