L'affichage d'une image lors de la sélection d'une option dans une liste déroulante

J'essaye de modifier une image lors de la sélection d'une option dans une liste déroulante:

function volvoCar()
{
var img = document.getElementById("image");
img.src="volvo.png";
return false;
}

Et ainsi de suite pour chaque voiture.

<img id="image" src="Null_Image.png"/>
<select id="CarList">
<option onclick="nullCar()">No Car</option>
<option onclick="volvoCar()">Volvo</option>
<option onclick="audiCar()">Audi</option></select>

Je n'arrive pas à trouver quelque chose en ligne qui me donne une solution. Si c'est parce que je suis un phrasé il maladroitement ou parce que ce que je suis en train de faire est impossible avec le javascript, je ne sais pas.

InformationsquelleAutor Chucky Chan | 2013-05-21
  1. 2

    Au lieu de définir la onClick événement pour une option, définissez la onChange événement pour le sélectionner.

    HTML

    <img id="image" src="Null_Image.png" />
<select id="CarList">
    <option value="Null_Image.png">No Car</option>
    <option value="volvo.png">Volvo</option>
    <option value="audi.png">Audi</option>
</select>

    JavaScript

    function setCar() {
    var img = document.getElementById("image");
    img.src = this.value;
    return false;
}
document.getElementById("CarList").onchange = setCar;

    Voici un travail de démonstration

    InformationsquelleAutor Trey Hunner
  2. 1

    D'accord, vous êtes en train de faire plusieurs choses mal.

    1. Votre fonction est appelée volvoCar et que vous tentez d'utiliser une fonction appelée VolvoCar - JavaScript est sensible à la casse.

    2. Ce n'est pas la meilleure façon d'attribuer un écouteur d'événement. Vous êtes en train d'ajouter dans le code HTML, ce qui est considéré comme "bordélique" (voir JavaScript Discret). Aussi, vous voulez joindre le function, pas le résultat de la fonction (dont vous faites par l'appelant). Les fonctions sont des objets de première classe en JavaScript.

    3. onclick est un mauvais gestionnaire d'événement à utiliser dans ce cas. Vous souhaitez utiliser le onchange gestionnaire de la <select> élément.

    Donc:

    HTML:

    <img id="image" src="Null_Image.png"/>
<select id="CarList">
    <option value="Null">No Car</option>
    <option value="Volvo">Volvo</option>
    <option value="Audi">Audi</option>
</select>

    JS:

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

var carList = document.getElementById('CarList');
carList.addEventListener('change', changeCarImage, false); //Note this has some issues in old browsers (IE).

    Cela peut être vu travailler ici!

    InformationsquelleAutor phenomnomnominal