Выбор выпадающего списка и появление разных изображений (с использованием Javascript)

Question

Я пытаюсь создать разные изображения после выбора опции из выпадающего списка. Я знаю, что это, вероятно, очень просто, но я очень новичок в HTML и Javascript. Не знаете, где и почему код не производит правильный вывод. Благодаря!

<script type = "text/javascript"> 
    function displayImage(elem) { 
    var img = document.getElementById("dessert"); 
    image.src = elem.value; 
    } 
    </script> 

<form name="controls"> 
<select name="dessertchoice" onchange="displayImage(this);"> 
    <option value="">None</option> 
    <option value="http://web.ics.purdue.edu/~lrourk/IE332/chocolate.jpg">Chocolate</option> 
    <option value="http://web.ics.purdue.edu/~lrourk/IE332/icecream.jpg">Ice Cream</option> 
    <option value="http://web.ics.purdue.edu/~lrourk/IE332/fruit.jpg">Fruit</option> 
    <option value="http://web.ics.purdue.edu/~lrourk/IE332/brule.jpg">Creme Brulee</option> 
</select> 
</br></br> 

<td> 
<img id="dessert" src="" style="width:300px;height:200px;"/> 
</td></tr> 
</form> 

Answer 1

это просто простая опечатка, случается с лучшими из нас :)

Изменить это image.src = elem.value; к img.src = elem.value;

Вот рабочий пример: http://jsbin.com/jamixipiza/1/edit?html,output

Надежда, что помогает!

Answer 2

Попробуйте заменить img для image в displayImage

<script type = "text/javascript"> 
 
    function displayImage(elem) { 
 
    var img = document.getElementById("dessert"); 
 
    img.src = elem.value; 
 
    } 
 
    </script> 
 

 
<form name="controls"> 
 
<select name="dessertchoice" onchange="displayImage(this);"> 
 
    <option value="">None</option> 
 
    <option value="http://web.ics.purdue.edu/~lrourk/IE332/chocolate.jpg">Chocolate</option> 
 
    <option value="http://web.ics.purdue.edu/~lrourk/IE332/icecream.jpg">Ice Cream</option> 
 
    <option value="http://web.ics.purdue.edu/~lrourk/IE332/fruit.jpg">Fruit</option> 
 
    <option value="http://web.ics.purdue.edu/~lrourk/IE332/brule.jpg">Creme Brulee</option> 
 
</select> 
 
</br></br> 
 

 
<td> 
 
<img id="dessert" src="" style="width:300px;height:200px;"/> 
 
</td></tr> 
 
</form>