javascript - 每个下拉项显示不同的图像(HTML + Javascript)

Question

我目前正在尝试创建一个 pokedex 应用程序，并有一个包含每个口袋妖怪名称的下拉菜单，然后在上方为该口袋妖怪提供相应的图像，然后在选择新图像时会发生变化。

我遇到了麻烦，因为图像目前没有改变。

这就是我目前所拥有的。我有一个 pokeball 的默认图片，但似乎无法在选择下一个项目时更改它。非常感谢任何帮助。

var changePokemonImage = function() {
  document.getElementById('image').src = this.options[this.selectedIndex].value
}

var pokemonList = document.getElementById('pokemonList');
pokemonList.addEventListener('change', changePokemonImage, false);

<br>
<img id="image" src="PokeBall_Image.png" />
<br>
<br>
<select id="pokemonList">
  <option value="Please Select A Pokemon">Please Select A Pokemon:</option>
  <option value="Bulbasaur">Bulbasaur</option>
</select>

Answer 1

假设您在同一文件夹中的某处有 bulbasaur.png，请执行此操作

var changePokemonImage = function() {
  document.getElementById('image').src = this.options[this.selectedIndex].value + '.png'
}

var pokemonList = document.getElementById('pokemonList');
pokemonList.addEventListener('change', changePokemonImage, false);

操作只是在所选选项的末尾添加'.png'，因为您需要指定扩展名才能加载有效图像