Change image source based on asp:DropDownList selection

Question

I want to be able to change an image depending on what is selected in the drop down box...

I have this JS code to change the image. Simplified of course.

<script type="text/javascript">
        function changeImage()
        {
            var oDDL = document.all("ddlNAME");
            var NAME= oDDL.options[oDDL.selectedIndex].text;

            switch(NAME)
            {
                case "Name":
                    document.getElementById("img").src="img1.png";
                    break;
                case "Name2":
                    document.getElementById("img").src="img2.png";
                    break;
                default:
                    document.getElementById("img").src="img3.png";
            }
        }
    </script>

When I call this function I do it in my DDL implementation.

<asp:DropDownList ID="ddlNAME" runat="server" OnTextChanged="changeImage()" >

But for some reason the changeImage() is not firing. it is giving me an error saying

'changeImage' is not a member of 'ASP.default_aspx'

I know this is a noob question and it is something small... But this is my first day every using javascript so bear with me please. Thanks!

Answer 1

Looks like you have told it to run a server-side event, so it is trying to find a function called changeImage() within your ASPX script.

You need it to run a Javascript event client-side. Use the onChanged() event instead.

<asp:DropDownList ID="ddlNAME" runat="server" onChanged="changeImage();" >