javascript - 引用 150 个名称相同但后面有数字的图像的点击事件

Question

你好，所以我有一个 pokedex 的获取，我希望引用 pokedex 中的每个图像以获取点击事件，

https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png

对于我获取的所有口袋妖怪，png之前的1从1-150变化，所以有没有办法像插值一样"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i}.png"

并制作一个for循环我希望能够单击图片并显示口袋妖怪的统计信息我已经准备好所有这些信息可供参考我只需要能够将图片作为点击事件的自己的ID

标签： javascripthtmlimageinterpolation

Answer 1

你的意思是这样的？

document.getElementById("placehere").innerHTML = Array.from({length: 10},  // change to whatever number
    (_, i) => `<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i+1}.png"/>`)
  .join("")

<div id="placehere"></div>

较早的答案

const pokemons = [
  {name:"bla1", id:1},
  {name:"bla2", id:2}
];

document.getElementById("result").innerHTML = pokemons.map(pokemon => `<a href="/${pokemon.name}.html"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png"></a>`).join("")

<div id="result"></div>

或者

const pokemons = [{name:"bla1"},{name:"bla2"}];

document.getElementById("result").innerHTML = pokemons.map((pokemon,i) => `<a href="/${pokemon.name}.html"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i+1}.png"></a>`).join("")

<div id="result"></div>