Getting input from a drop down list - HTML Forums

jim255 · 10-21-2009, 05:19 PM

Can anyone tell me what im doing wrong here because this code isnt working for me at the moment

<head>
<title></title>
</head>

<body>
<form action = <"">
<h1>Select color</h1>
<fieldset>
<select id = "selcolor">
<option value = "#FFFFFF">white</option>
<option value = "#FF0000">Red</option>
<option value = "#FFCC00">Orange</option>
</select>

<input type = "button"
value = "change color"
onclick = "changeColor ()" />
</fieldset>
</form>
</body>

</html>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// from document1.html

function changeColor(){
var selColor = document.getElementById("selColor");
var color = selColor.#FFFFFF;
document.body.style.backgroundColor = color;
} // end function
/*]]>*/
</script>

(this is the javascript, but I am unsure if its right or where I need to insert it)

thanks

Vege · 10-21-2009, 06:25 PM

HTML Code:

<html><head>
<title></title>


<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function changeColor(){
var selColor = document.getElementById("selcolor");
var color = selColor[selColor.selectedIndex].value;
document.body.style.backgroundColor = color;
} // end function
/*]]>*/
</script>


</head>

<body>
<form action="">
<h1>Select color</h1>
<fieldset>
<select id ="selcolor">

<option value ="#FFFFFF">white</option>
<option value ="#FF0000">Red</option>
<option value ="#FFCC00">Orange</option>
</select>

<input type = "button" value = "change color" onclick = "changeColor ()" />
</fieldset>
</form>
</body>

</html>

It should be something like this.
If i remember correctly IE6 is kinda bad when using style with javascript, better bet is to change stylesheet, not style.

jim255 · 10-22-2009, 07:13 AM

Thanks Vege that works fine now.

Ive moved on to a different function now but im having the same problem with this one - can you tell me if theres something im doing wrong that is causing me to have these problems?

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function sayHi(){
txtName = document.getElementById("txtName");
divOutput = document.getElementById("divOutput");

name = txtName.value;

divoutput.innerHTML = "<em>" + name + "<\/em>";
divOutput.innerHTML = " is a very nice name. ";
}
/*]]>*/
</script>

<head>
<title></title>
</head>

<body>
<h1>Inner HTML demo</h1>
<form action = "">
<fieldset>
<label>Please type your name</label>
<input type = "text"
id = "txtName" />
<button type = "button"
onclick = "sayHi()">
Click me
</button>
</fieldset>
</form>

<div id = "divOutput">
Watch this space.
</div>
</body>

</html>

Vege · 10-22-2009, 10:45 AM

You should be able to check the javascript console for the error thats is created.

Javascript goes inside <head> -tags and you seem to be missing opening <html> -tag.