在pokedex项目中调用数组

const entry = document.querySelector('.pkmn-entry');
let currentIndex = 0;

const pokedex = [{
  id: 1,
  name: 'Bulbasaur',
  species: 'Seed Pokemon',
  height: 0.7, /* meters */
  weight: 6.9, /* kg */
  description: 'A strange seed was planted on its back at birth. The plant sprouts and grows with this Pokémon',
  types: ['grass', 'poison'],
}, {
  id: 2,
  name: 'Ivysaur',
  species: 'Seed Pokemon',
  height: 1.0, /* meters */
  weight: 13.0, /* kg */
  description: 'When the bulb on its back grows large, it appears to lose the ability to stand on its hind legs.',
  types: ['grass', 'poison'],
}, {
  id: 3,
  name: 'Venusaur',
  species: 'Seed Pokemon',
  height: 2.0, /* meters */
  weight: 100.0, /* kg */
  description: 'The plant blooms when it is absorbing solar energy. It stays on the move to seek sunlight.',
  types: ['grass', 'poison'],
}];

render();

function turnOnPokedex() {
  entry.classList.toggle('hide');
}

function navigate(button) {
  const offset = button.dataset.direction === 'prev' ? -1 : 1;
  // Cycle through
  currentIndex = (currentIndex + offset + pokedex.length) % pokedex.length;
  render();
}

function render() {
  const p = pokedex[currentIndex];
  
  const resource = `${p.id.toString().padStart(4, '0')}${p.name}.png`;
  entry.querySelector('.pkmn-img').src = getAbsolutePath(resource, 'https://archives.bulbagarden.net/media/upload');
  entry.querySelector('.pkmn-img').alt = p.name;
  entry.querySelector('.pkmn-no').textContent = p.id.toString().padStart(3, '0');
  entry.querySelector('.pkmn-name').textContent = p.name;
  entry.querySelector('.pkmn-specs').innerHTML = `
    Species: ${p.species}<br />
    Height: ${metersToFeet(p.height)}<br />
    Weight: ${round(kgToLbs(p.weight), 1)} lbs
  `;
  entry.querySelector('.pkmn-desc').textContent = p.description;
  entry.querySelector('.pkmn-types').innerHTML =
    p.types
      .map(type => `<div data-type="${type}">${capitalize(type)}</div> `)
      .join('');
}

function getAbsolutePath(filename, baseUrl) {
  const hash = CryptoJS.MD5(filename.replace(/ /g, '_')).toString();
  return `${baseUrl}/${hash[0]}/${hash.substring(0, 2)}/${filename}`;
};

function capitalize(word) {
  return word[0].toUpperCase() + word.slice(1).toLowerCase();
}

function metersToFeetAndInches(meters) {
  const inches = meters * 39.3701;
  return {
    feet: Math.floor(inches / 12),
    inches: Math.round(inches % 12)
  };
}

function metersToFeet(meters) {
  const { feet, inches } = metersToFeetAndInches(meters);
  return `${feet}'${inches}"`;
}

function kgToLbs(kg) {
  return kg * 2.20462;
}

function round(n, p = 2) {
  return (e => Math.round(n * e) / e)(Math.pow(10, p));
}

.pkmn-entry .pkmn-no {
  font-weight: bold;
}

.pkmn-entry .pkmn-types div {
  display: inline-block;
}

.hide {
  display: none;
}

.pkmn-types [data-type] { padding 0.5rem; }
.pkmn-types [data-type="grass"] { background: #AFA; }
.pkmn-types [data-type="poison"] { background: #FDF; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/core.min.js" integrity="sha512-t8vdA86yKUE154D1VlNn78JbDkjv3HxdK/0MJDMBUXUjshuzRgET0ERp/0MAgYS+8YD9YmFwnz6+FWLz1gRZaw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/md5.min.js" integrity="sha512-3sGbaDyhjGb+yxqvJKi/gl5zL4J7P5Yh4GXzq+E9puzlmVkIctjf4yP6LfijOUvtoBI3p9pLKia9crHsgYDTUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button type="button" onclick="turnOnPokedex()">Toggle Pokedex</button>
<div class="pkmn-entry hide">
  <img class="pkmn-img" src="" alt="Bulbasaur" width="250" height="220">
  <div class="pkmn-no">001</div>
  <div class="pkmn-name">Bulbasaur</div>
  <div class="pkmn-specs">
    Species: Seed Pokemon<br />
    Height: 2'04<br />
    Weight: 15.2lbs(6.9kg)
  </div>
  <div class="pkmn-desc">
    A strange seed was planted on its back at birth. The plant sprouts and grows with this Pokémon.
  </div>
  <div class="pkmn-types">
    <div data-type="grass">Grass</div>
    <div data-type="poison">Poison</div>
  </div>
  <div class="actions">
    <button type="button" data-direction="prev" onclick="navigate(this)">Prev</button>
    <button type="button" data-direction="next" onclick="navigate(this)">Next</button>
  </div>
</div>