Ссылка на событие при нажатии для 150 изображений, которые имеют одинаковые имена, но после них стоят номера

#javascript #html #image #interpolation

Вопрос:

Здравствуйте, у меня есть выборка для pokedex, на которую я хочу ссылаться на каждое изображение в pokedex для события при нажатии,

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

1 перед png идет от 1 до 150 для всех покемонов из моей выборки, так есть ли способ интерполировать его, как "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i}.png"

и делая цикл for, я хочу иметь возможность нажимать на картинки, и это выводит статистику покемонов, у меня есть вся информация, на которую можно ссылаться, мне просто нужно иметь возможность получать фотографии в качестве их собственного идентификатора для событий кликов

1. можете ли вы поделиться какой-либо попыткой, которую вы сделали до сих пор в коде?

2. Нужно поймать их всех

3. о, извините за это, ребята, я не видел всех ваших комментариев, да, поэтому я просто сделал каждую фотографию идентификатором для события onclick

4. константные displayPokemon = (покемон) => { константные pokemonli = покемонов.карте ( (pokelist) => <li class="pictures" onclick="selectPokemon(${pokelist.id})"> <img class="pokeImage" src="${pokelist.image}"/></li> ).присоединиться(«); быстрый.innerHTML будет = pokemonli; }; от const selectPokemon = асинхронный (идентификатор) => { // консоль.отчет(код) константный URL-адрес = https://pokeapi.co/api/v2/pokemon/${id} const и ответ = ждут выборки(URL-адрес) константный pokelist = жду ответа.формат JSON() displayPopup(pokelist) }

5. я уже ссылался на список покелистов ранее, чтобы просто получить изображение и идентификатор

Ответ №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>