Trouble calling a JavaScript function

[invaderflid]

Im trying to send the value of an HTML drop down menu to a JavaScript function. Heres the code:

<script type="text/javascript">function display(value){	switch(value)	{    case 1:  document.write(<p>"yay cake"</p>);    break;    default: document.write(<p>"Silly goose"</p>);	}}</script><form name="jump"><select name="menu" onChange="display(this.value)">   <option value="#">Select one</option><option value= 1>Nike</option><option value= 2>adidas</option><option value= 3>reebok</option><option value= 4>puma</option><option value= 5>converse</option></select></form>

I am recieving this error when trying to use the drop down box:Line: 165Char : 1Error: Object expectedCode : 0 For easier reference, this is line 165: <select name="menu" onChange="display(this.value)"> Also, what I would like to do is when this is working is to display an image rather than the text, is this possible?

[Ingolme]

Don't use document.write()It will erase all the contents of your page and output the given string.Second of all: the result returned by an input element is always a string. Rather than case 1: write case "1":None of what I said before will solve your problem. Maybe "display" and/or "value" are reserved words (I'm not totally sure about it but you have to be safe), try changing your function name.

function show(V){  switch(V) {	case "1": document.getElementById("outputText").firstChild.nodeValue = "yay cake";	break;	default: document.getElementById("outputText").firstChild.nodeValue = "Silly goose";  }}

I've added a <div> to output the results.Don't forget to put quotes around all attribute values:

<div id="outputText"></div><form name="jump"><select name="menu" onchange="show(this.value)"><option value="#">Select one</option><option value="1">Nike</option><option value="2">adidas</option><option value="3">reebok</option><option value="4">puma</option><option value="5">converse</option></select></form>

[invaderflid]

Thanks for the heads up on the proper syntax and form, however I get an error saying :document.getElementById("outputText").firstChild is null or not an object.Is there a better way to go about what I'm doing or is my best bet resolving this error?I tried checking java2s.com to see if I could better understand the properties and syntax etc. but it wasn't much help for me .

[jesh]

Thanks for the heads up on the proper syntax and form, however I get an error saying :document.getElementById("outputText").firstChild is null or not an object.Is there a better way to go about what I'm doing or is my best bet resolving this error?

Rather than trying to set the nodeValue of the firstChild of that div element, you might try simply setting the innerHTML property:

document.getElementById("outputText").innerHTML = "yay cake";

Or, if you want to use the XML DOM, something like this:

var mydiv = document.getElementById("outputText");while(mydiv.childNodes.length > 0){	mydiv.removeChild(mydiv.childNodes[0]);}mydiv.appendChild(document.createTextNode("yay cake"));

I'd probably stick with the first one though.

[Ingolme]

The problem is that innerHTML isn't a web standard. It's like the <embed> element. It works everywhere but is incorrect.Every element should have a text node child, whether its content is an empty string or something else.

[jeffman]

Every element should have a text node child, whether its content is an empty string or something else.

According to my FF DOM Inspector, this may not always be the case, so it shouldn't be something to rely on.OTOH, innerHTML has been part of the W3C HTML 5 spec for a while.I think it's here to stay, and I get consistent results with it already. Especially for setting it. As with the DOM itself, you may find surprises in the innerHTML that your browser writes on its own, so testing for something there can be dicey.