Change image source based on asp:DropDownList selection

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";
            }
        }
    &开发者_如何学Clt;/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!

---

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();" >

---

Try:

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

I believe the way you are using it is making it try and call a class instead of a javascript function.

---

I think you need to use

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

instead of the OnTextChanged

---

The problem is that the dropdown list is being treated as a server element, rather than a client-side control. When it is changed, your entire page is posting back to the server, which is looking for a method called changeImage in your page's class -- and when it does not find it, it is throwing the error.

In addition, you'll want to avoid things like document.all. Use document.getElementById instead. Among other things, document.all is an extension to DOM Level 0, and is much slower than getElementById.

---

OnTextChanged is an ASP.Net event, it's not for JavaScript. It's looking in your .vb file for a VB function called changeImage().

You can try using onChange="changeImage()".

You can also use the this keyword in your function to reference the object that your function is running on (in this case the dropdown box) instead of searching for it through getElementById() or otherwise.

---

You have to register the JavaScript code to the Page, and then change the "OnChange" attribute of the DropDownList to your JS function. You can read more here in the "RegisterStartupScript" and "RegisterClientScriptBlock" sections.

---

You will need to change your dropdown code to this:

<asp:DropDownList ID="ddlNAME" runat="server" onchange="changeImage()" AutoPostBack="false" >

The onchange is a javascript event handler, the eventhandler you were using is an ASP.NET control event handler. The AutoPostBack attribute is necessary to keep your control from causing a postback (to execute server side code) when you clearly want client code to run.