選擇下拉選項並顯示不同的圖像（使用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;爲image代img

這裏是工作示例：http://jsbin.com/jamixipiza/1/edit?html,output

希望幫助！

Answer 2

嘗試內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>