html - Javascript switch statement for menu drop list -

i'm working on doing switch statement menu drop list in javascript , have following code far (the script in head , rest in body, , map_img1, etc. url):

<script>     function selecttrafficcamera(inobj) {         switch(inobj) {             case "0":                 document.getelementbyid("trafficcams").innerhtml = "<p id="display2"><big><b>choose map</b></big></p>"                 break;             case "1":                 document.getelementbyid("trafficcams").innerhtml = "<img src="map_img1"/>"                 break;             case "2":                 document.getelementbyid("trafficcams").innerhtml = "<img src="map_img2"/>"                 break;             case "3":                 document.getelementbyid("trafficcams").innerhtml = "<img src="map_img3"/>"                 break;             case "4":                 document.getelementbyid("trafficcams").innerhtml = "<img src="map_img4"/>"                 break;             }     } </script>  <div id="trafficcams" align="middle" width="400" height="400"> </div>  <div id="menulist" align="middle">     <select onchange="selecttrafficcamera(this.value);">         <option value="0" selected="selected">select traffic cam</option>         <option value="1">brisbane city</option>         <option value="2">rochedale</option>         <option value="3">logan city</option>         <option value="4">nerang</option>     </select> </div> 

basically i'm trying when different option selected in menu drop down, change image in div tag, unfortunately isn't working me , i'm unsure why isn't. tried creating img tag blank src inside div , rather using innerhtml use .src didn't work. able insight on please?

thanks in advance.

**just clarification, map_img1, etc. url in format url(imagename).jpg

your quotes messed new <p> , <img> tags.

change these:

= "<p id="display2"><big><b>choose map</b></big></p>" // , = "<img src="map_img3"/>" // , rest 

to these:

= "<p id='display2'><big><b>choose map</b></big></p>" // , = "<img src='map_img3' />" // , rest 

otherwise, looks fine.

demo: http://jsfiddle.net/bevls/

also make sure images have correct source - normally, image files have extension (.png, .gif, .jpg, etc.). , make sure in same directory html file, because that's you're saying not giving path, , using filename.

another option having html there, hiding/showing , changing src. this:

<div id="trafficcams" align="middle" width="400" height="400">     <p id="display2"><big><b>choose map</b></big></p>     <img id="displayimg" src="" style="display:none;" /> </div> 

and use js:

function selecttrafficcamera(inobj) {     if (inobj === "0") {         document.getelementbyid("display2").style.display = "block";         document.getelementbyid("displayimg").style.display = "none";     } else {         document.getelementbyid("display2").style.display = "none";         var img = document.getelementbyid("displayimg");         img.src = "map_img" + inobj;         img.style.display = "inline";     } } 

demo: http://jsfiddle.net/gbdv2/2/