需要帮助循环遍历附加在图像上的标题

Question

我需要创建一个for循环，其计数器从0到小于标题数组的长度为1。每次迭代时，将以下文本添加到htmlCode变量的值中：

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

其中，i是该迭代的计数器的值，captionsi是标题数组中的对应元素。如果有人能帮我的话，我已经坚持了好几天了。

    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;

Answer 1

有两点需要注意：

1. 使用document.getElementById('gallery')而不是document.getElementById(gallery)
2. 您可以使用文字存储interate值，并最终将其分配给gallery外部循环。

​

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>

​