<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<script type="text/javascript">
function selectSomething(){
var obj = document.all.select1;
var selectValue = obj.options[obj.selectedIndex].value;
if(selectValue == "1"){
document.getElementById("text").innerHTML ="one";
}
if(selectValue == "2"){
document.getElementById("text").innerHTML ="two";
}
}
</script>
</head>
<body onload="selectSomething()">
<select id="select1" onchange="selectSomething()">
<option value="1">One</option>
<option value="2">Two</option>
</select>
<div id="text"></div>
</body>
</html>
This code works in Chrome 17.0.963.83, IE 8.0.6001.18702, but does not work in Firefox 11.0. The innerhtml never shows in Firefox unless I remove the DOCTYPE which I cannot do because this webpage will be part of a larger project. Is this a Firefox bug? How do I make this work in Firefox?
Take a look at the Firefox error console (really useful for web developers). In Firefox,
document.allis undefined.Instead, you should use
document.getElementById("select1").