div显示不了js函数控制的显示内容，帮我看看问题出在哪？

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<%
String lx=request.getParameter("lx");
if (lx==null) lx="shuiwen";
%>
<body>
<form name="form1" method="post" action="">
<p class="STYLE2" align="center">
  查询参数选择:
    <INPUT TYPE="radio" NAME="lx" value="shuiwen" id="水温(℃)"<%if (lx.equals("shuiwen")){%>checked<%}%>>
水温
<INPUT TYPE="radio" NAME="lx" value="yandu" id="盐度(ppt)"<%if (lx.equals("yandu")){%>checked<%}%>>
盐度
<INPUT TYPE="radio" NAME="lx" value="chaowei" id="潮位(cm)"<%if (lx.equals("chaowei")){%>checked<%}%>>       潮位
<input name="button" type="submit" value="数据查询">&nbsp;&nbsp;
</form>
<script type="text/javascript" language="javascript">
<!--
function Foo()
{
    var selectedIndex = -1;
    var form1 = document.getElementById("form1");
    var i = 0;
    
    for (i=0; i<form1.lx.length; i++)
    {
        if (form1.lx[i].checked)
        {
            selectedIndex = i;
   document.getElementById("canshu").innerHTML=form1.lx[i].id;
   break;
        }
    }
}
-->
</script>
<div  style="background:#33FF00; height:200px; width:200px" align="center"  id="canshu"></div>
</body>
</html><div  style="background:#33FF00; height:200px; width:200px" align="center"  id="canshu"></div>中显示的内容是空白，帮我看看问题出在哪里啊？