Displaying Different Images Per Dropdown Item (HTML + Javascript)

Question

I am currently in the process of trying to create a pokedex app and have a dropdown with each pokemon's name then have a corresponding image for that pokemon above, then will change when a new one is selected.

I am having trouble as the image isn't changing currently.

This is what I have so far. I have a default picture of a pokeball but can't seem to get it to change when the next item is selected. Any help is much appreciated.

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>

From a quick overview, it seems like you try to set the image's source to "Bulbasaur" what is not a valid URL for an image. Something like "Bulbasaur.png" would be. — CodeF0x
– CodeF0x, Commented Jan 29, 2019 at 19:16
As stated, your event listener is setting an src attribute to the value of the selected option ("Bulbasaur"), but this is resulting in a 404 error. You'll need some logic to specify an image based on the selected value, either a switch statement, or a data-src attribute on each option, etc. JSFiddle for reference: jsfiddle.net/whLjax02 — Tim Lewis
– Tim Lewis, Commented Jan 29, 2019 at 19:19

weegee · Accepted Answer · 2019-02-06 18:15:07Z

2

Assuming you have bulbasaur.png somewhere in the same folder, do this

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

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

The manuplation is just the addition of '.png' at the end of the selected option as you need to specify a extension to load a valid image

edited Feb 6, 2019 at 18:15

answered Jan 29, 2019 at 19:25

weegee

3,4382 gold badges22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sol · Accepted Answer · 2019-05-18 18:25:17Z

You could make a JSON object with the format name: "image_url", and then index it like so: document.getElementById("image").src = images[this.options[this.selectedIndex].value];

This allows for the images to be anywhere on the Web, with no dependence on relative paths.

Here's a demo:

var images = {
    Bulbasaur:
        "https://upload.wikimedia.org/wikipedia/en/2/28/Pok%C3%A9mon_Bulbasaur_art.png",
    default:
        "https://vignette.wikia.nocookie.net/pokemon/images/4/44/Pok%C3%A9_Ball.jpg/revision/latest?cb=20090507215041"
};
var changePokemonImage = function() {
    const value = this.options[this.selectedIndex].value;
    var imageURL = images[value];
    document.getElementById("image").src = imageURL;
};

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

document.getElementById("image").src = images["default"];

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

Collectives™ on Stack Overflow

Displaying Different Images Per Dropdown Item (HTML + Javascript)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related