Selecting a dropdown choice and having different images appear (using Javascript)

Question

I am trying to have different images come up after selecting an option from a dropdown. I know it's probably very basic, but I am very new to HTML and Javascript. Not sure where or why the code isn't producing the correct output. Thanks!

<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>

MagJS · Accepted Answer · 2015-09-20 23:51:09Z

1

it's just a simple typo, happens to the best of us :)

Change this image.src = elem.value; to img.src = elem.value;

Here is the working example: http://jsbin.com/jamixipiza/1/edit?html,output

Hope that helps!

answered Sep 20, 2015 at 23:51

MagJS

4223 silver badges3 bronze badges

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

Comments

guest271314 · Accepted Answer · 2015-09-20 23:50:10Z

Try substituting img for image within 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>

Collectives™ on Stack Overflow

Selecting a dropdown choice and having different images appear (using 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