Help I’m very new with web developing using ASP.NET. Why is the my web app does not give the desired output like IE does when debugging my code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h1{color:Blue}
h2{color:Red}
</style>
<script type="text/javascript">
function ShowColor() {
alert("You selected " + SelectColor.value);
BodyContent.style.backgroundColor = SelectColor.value;
}
</script>
</head>
<body>
<div id="BodyContent">
<h1>HelloWorld</h1>
<h2>Welcome</h2>
<p>
This is my first Web Page</p>
<hr />
Please select color:
<select id="SelectColor">
<option value="white">white</option>
<option value="yellow">yellow</option>
<option value="silver">silver</option>
</select>
<input id="ButtonColor" type="button" value="Select" onclick="ShowColor()" />
</div>
</body>
</html>
Problem is that FF does not executes the javascript “ShowColor” when i clicked the Select button but IE does.

function ShowColor() {
alert("You selected " + SelectColor.value);
BodyContent.style.backgroundColor = SelectColor.value;
}
Your javascript function should be as follows:
You need to select the actual elements by using javascript. For example document.gelElementById("id of element"), and then change the documents color. This should work in any browser.
The function now shows the appropriate selected value and actually changes the background of the webpage.