javascript中显示“未定义”的问题

一个日历控件代码如下：<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
var now=new Date();
var allYear=now.getFullYear();
var allMonth=now.getMonth();
var allDate=now.getDate();
//alert(111);
//nowDate表示日期
function showCalendar(nowYear,nowMonth,nowDate)
{
var begin=0;
var days=0;//该月份的天数
if(nowMonth==0||nowMonth==2||nowMonth==4||nowMonth==6||nowMonth==7||nowMonth==9||nowMonth==11)
{
days=31;
}
if(nowMonth==3||nowMonth==5||nowMonth==8||nowMonth==10)
{
days=30;
}
if(nowMonth==1)
{
if(nowYear%4==0&&nowYear%400!=0)
{
days=29;
}
else
{
days=28;
}
}
var d=new Date(nowYear,nowMonth,1);
var xq=d.getDay();//获取该月第一天的星期

var strContent='<div id="myCal">'+
    '<table id="tab" width="210px" border="1">'+
'<tr>'+
 '<td><table width="100%" border="0">'+
'<tr>'+
  '<td><table width="100%" border="1" bordercolor="#009933" bgcolor="#009933">'+
'<tr bordercolor="#009933">'+
  '<td align="center" bgcolor="#009933" width="22px" onClick="preYear()">&lt;&lt;</td>'+
  '<td align="center" bgcolor="#009933" width="22px" onClick=preMonth()>&lt;</td>'+
  '<td id="chooseYear" align="center" bgcolor="#009933" width="64px" onClick="chooseYear()">'+nowYear+'</td>'+
  '<td id="chooseMonth" align="center" bgcolor="#009933" width="58px" onClick="chooseMonth()">'+(nowMonth+1)+'</td>'+
  '<td align="center" bgcolor="#009933" width="22px" onClick=nextMonth()>&gt;</td>'+
  '<td align="center" bgcolor="#009933" width="22px" onClick=nextYear()>&gt;&gt;</td>'+
'</tr>'+
  '</table></td>'+
'</tr>'+
'<tr>'+
  '<td><table width="100%" border="1"  bordercolor="#009933" bgcolor="#009933">'+
'<tr>'+
  '<td width="14%" align="center" bgcolor="#009933">日</td>'+
  '<td width="14%" align="center" bgcolor="#009933">一</td>'+
  '<td width="14%" align="center" bgcolor="#009933">二</td>'+
  '<td width="14%" align="center" bgcolor="#009933">三</td>'+
  '<td width="14%" align="center" bgcolor="#009933">四</td>'+
  '<td width="14%" align="center" bgcolor="#009933">五</td>'+
  '<td width="14%" align="center" bgcolor="#009933">六</td>'+
'</tr>'+
  '</table></td>'+
'</tr>'+
'<tr>'+
  '<td><table width="100%" border="0">'+
'<tr>';
document.write(strContent);
for(begin=0;begin<xq;begin++)
{
document.write('<td width="14%" align="center">&nbsp;</td>');
}
for(var d=1;d<=days;d++)
{
if(begin%7==0)
{

document.write('</tr>');
document.write('<tr>');
}
document.write('<td id="myTd" width="14%" align="center" bgcolor="#999999" onClick="chooseDate('+d+')"'+
                                '>'+d+'</td>');
begin++;
}
if(begin%7==0)
{
document.write('</tr>');
}
else
{
while(begin%7!=0)
{
document.write('<td width="14%" align="center">&nbsp;</td>');
begin++;
}
document.write('</tr>');
}                           var strContent2='</table></td>'+
'</tr>'+
'<tr>'+
  '<td><table width="100%" border="0">'+
'<tr>'+
  '<td width="57%" align="center">&nbsp;</td>'+
  '<td width="22%" align="center" onClick=clearInput()>清空</td>'+
  '<td width="21%" align="center" onClick=hiddenCalendar()>关闭</td>'+
'</tr>'+
  '</table></td>'+
'</tr>'+
  '</table></td>'+
'</tr>'+
  '</table>'+
'</div>';
document.write(strContent2);
allYear=nowYear;
allMonth=nowMonth;
allDate=nowDate;
}
function preYear()
{
if(allYear>1900)
{
allYear--;
//alert(nowYear);
}
showCalendar(allYear,allMonth,allDate);
}
function nextYear()
{
if(allYear<2100)
{
allYear++;
}
showCalendar(allYear,allMonth,allDate);
}
function preMonth()
{
if(allMonth>0)
{
allMonth--;
}
else
{
if(allYear>1900)
{
allYear--;
// alert(nowMonth);
allMonth=11;

}
}
showCalendar(allYear,allMonth,allDate);
}
function nextMonth()
{
if(allMonth<11)
{
allMonth++;
//alert(nowYear);
}
else 
{
if(allYear<2100)
{
allYear++;
allMonth=0;
}
}
showCalendar(allYear,allMonth,allDate);
}
function chooseYear()
{
    var htmlStr='<select onchange="chooseYear_change(this.value)">';
    for(var i=1950;i<=(new Date()).getFullYear();i++)
    {
       if(i==allYear)
       {
          htmlStr+='<option value='+i+' selected="selected">'+i+'</option>';
       }
       else
       {
          htmlStr+='<option value='+i+'>'+i+'</option>';
       }
       
    }
htmlStr+='</select>';
document.all.chooseYear.innerHTML=htmlStr;

}
function chooseYear_change(newYear)
{
    allYear=newYear;
    showCalendar(allYear,allMonth,allDate);
}
function chooseMonth()
{
    var htmlStr='<select onchange="chooseMonth_change(this.value)">';
    for(var i=0;i<=11;i++)
    {
        if(i==allMonth)
        {
            htmlStr+='<option value='+i+'  selected="selected">'+(i+1)+'</option>';        
        }
        else
        {
            htmlStr+='<option value='+i+'>'+(i+1)+'</option>';
        }
        
    }
    htmlStr+='</select>';
document.all.chooseMonth.innerHTML=htmlStr;

}
function chooseMonth_change(newMonth)
{
    allMonth=parseInt(newMonth);
    showCalendar(allYear,allMonth,allDate);
        
}
function chooseDate(newDate)
{
    allDate=newDate;
    inputDate.value=allYear+'-'+(allMonth+1)+'-'+allDate;
    
}//function changeColor()
//{
//    myTd.style.bgColor="#FFFF00";
//}function test()
{
    var xStr=window.event.x;    
    //alert(xStr);
//    alert("tab");
   // var tab1=document.getElementById("tab");
    
    tab.offsetLeft=xStr;
tab.offsetTop=0;

    showCalendar(allYear,allMonth,allDate);}
//showCalendar(2011,0,10);
</script><body>
出生年月:<input type="text" id="inputDate" onclick="test()"/>
</body>
</html>
运行时显示"tab未定义",代码0
哪位高手能够解决

解决方案 »

  1.   

    你这里的tab是个变量把，变量在用前当然要先定义了，如var tab;
      

  2.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head>
    <script language="javascript">
        var now=new Date();
        var allYear=now.getFullYear();
        var allMonth=now.getMonth();
        var allDate=now.getDate();
        //alert(111);
    //nowDate表示日期
    function showCalendar(nowYear,nowMonth,nowDate)
    {
        var begin=0;
        var days=0;//该月份的天数
        if(nowMonth==0||nowMonth==2||nowMonth==4||nowMonth==6||nowMonth==7||nowMonth==9||nowMonth==11)
        {
            days=31;
        }
        if(nowMonth==3||nowMonth==5||nowMonth==8||nowMonth==10)
        {
            days=30;    
        }
        if(nowMonth==1)
        {
            if(nowYear%4==0&&nowYear%400!=0)
            {
                days=29;
            }
            else
            {
                days=28;
            }
        }
        var d=new Date(nowYear,nowMonth,1);
        var xq=d.getDay();//获取该月第一天的星期
        
    var strContent='<div id="myCal">'+
           '<table id="tab" width="210px" border="1">'+
            '<tr>'+
             '<td><table width="100%" border="0">'+
                '<tr>'+
                  '<td><table width="100%" border="1" bordercolor="#009933" bgcolor="#009933">'+
                    '<tr bordercolor="#009933">'+
                      '<td align="center" bgcolor="#009933" width="22px" onClick="preYear()">&lt;&lt;</td>'+
                      '<td align="center" bgcolor="#009933" width="22px" onClick=preMonth()>&lt;</td>'+
                      '<td id="chooseYear" align="center" bgcolor="#009933" width="64px" onClick="chooseYear()">'+nowYear+'</td>'+
                      '<td id="chooseMonth" align="center" bgcolor="#009933" width="58px" onClick="chooseMonth()">'+(nowMonth+1)+'</td>'+
                      '<td align="center" bgcolor="#009933" width="22px" onClick=nextMonth()>&gt;</td>'+
                      '<td align="center" bgcolor="#009933" width="22px" onClick=nextYear()>&gt;&gt;</td>'+
                    '</tr>'+
                  '</table></td>'+
                '</tr>'+
                '<tr>'+
                  '<td><table width="100%" border="1"  bordercolor="#009933" bgcolor="#009933">'+
                    '<tr>'+
                      '<td width="14%" align="center" bgcolor="#009933">日</td>'+
                      '<td width="14%" align="center" bgcolor="#009933">一</td>'+
                      '<td width="14%" align="center" bgcolor="#009933">二</td>'+
                      '<td width="14%" align="center" bgcolor="#009933">三</td>'+
                      '<td width="14%" align="center" bgcolor="#009933">四</td>'+
                      '<td width="14%" align="center" bgcolor="#009933">五</td>'+
                      '<td width="14%" align="center" bgcolor="#009933">六</td>'+
                    '</tr>'+
                  '</table></td>'+
                '</tr>'+
                '<tr>'+
                  '<td><table width="100%" border="0">'+
                    '<tr>';
                    document.write(strContent);
                    for(begin=0;begin<xq;begin++)
                    {
                        document.write('<td width="14%" align="center">&nbsp;</td>');
                    }
                    for(var d=1;d<=days;d++)
                    {
                        if(begin%7==0)
                        {
                        
        document.write('</tr>');
        document.write('<tr>');                
                        }
                        document.write('<td id="myTd" width="14%" align="center" bgcolor="#999999" onClick="chooseDate('+d+')"'+
                                    '>'+d+'</td>');
                        begin++;
                    }
                    if(begin%7==0)
                    {
                        document.write('</tr>');
                    }
                    else
                    {
                        while(begin%7!=0)
                        {
                            document.write('<td width="14%" align="center">&nbsp;</td>');
                            begin++;
                        }
                        document.write('</tr>');
                    }                           var strContent2='</table></td>'+
                '</tr>'+
                '<tr>'+
                  '<td><table width="100%" border="0">'+
                    '<tr>'+
                      '<td width="57%" align="center">&nbsp;</td>'+
                      '<td width="22%" align="center" onClick="clearInput()">清空</td>'+
                      '<td width="21%" align="center" onClick="hiddenCalendar()">关闭</td>'+
                    '</tr>'+
                  '</table></td>'+
                '</tr>'+
              '</table></td>'+
            '</tr>'+
          '</table>'+
        '</div>';
        document.write(strContent2);
        allYear=nowYear;
        allMonth=nowMonth;
        allDate=nowDate;
    }
    function preYear()
    {
        if(allYear>1900)
        {
            allYear--;
            //alert(nowYear);
        }
        showCalendar(allYear,allMonth,allDate);
    }
    function nextYear()
    {
        if(allYear<2100)
        {
            allYear++;
        }
        showCalendar(allYear,allMonth,allDate);
    }
    function preMonth()
    {
        if(allMonth>0)
        {
            allMonth--;        
        }
        else
        {
            if(allYear>1900)
            {
                allYear--;
    //            alert(nowMonth);
                allMonth=11;
                
            }
        }
        showCalendar(allYear,allMonth,allDate);
    }
    function nextMonth()
    {
        if(allMonth<11)
        {
            allMonth++;
            //alert(nowYear);
        }
        else 
        {
            if(allYear<2100)
            {
                allYear++;
                allMonth=0;
            }
        }
        showCalendar(allYear,allMonth,allDate);
    }
    function chooseYear()
    {
        var htmlStr='<select onchange="chooseYear_change(this.value)">';
        for(var i=1950;i<=(new Date()).getFullYear();i++)
        {
           if(i==allYear)
           {
              htmlStr+='<option value='+i+' selected="selected">'+i+'</option>';
           }
           else
           {
              htmlStr+='<option value='+i+'>'+i+'</option>';
           }
           
        }
        htmlStr+='</select>';
        document.all.chooseYear.innerHTML=htmlStr;
        
    }
    function chooseYear_change(newYear)
    {
        allYear=newYear;
        showCalendar(allYear,allMonth,allDate);
    }
    function chooseMonth()
    {
        var htmlStr='<select onchange="chooseMonth_change(this.value)">';
        for(var i=0;i<=11;i++)
        {
            if(i==allMonth)
            {
                htmlStr+='<option value='+i+'  selected="selected">'+(i+1)+'</option>';        
            }
            else
            {
                htmlStr+='<option value='+i+'>'+(i+1)+'</option>';
            }
            
        }
        htmlStr+='</select>';
        document.all.chooseMonth.innerHTML=htmlStr;
        
    }
    function chooseMonth_change(newMonth)
    {
        allMonth=parseInt(newMonth);
        showCalendar(allYear,allMonth,allDate);
            
    }
    function chooseDate(newDate)
    {
        allDate=newDate;
        inputDate.value=allYear+'-'+(allMonth+1)+'-'+allDate;
        
    }//function changeColor()
    //{
    //    myTd.style.bgColor="#FFFF00";
    //}function test()
    {
        var xStr=window.event.x;    
        //alert(xStr);
    //    alert("tab");
       showCalendar(allYear,allMonth,allDate);
       var tab1=document.getElementById("tab");
        
        tab.offsetLeft=xStr;
        tab.offsetTop=0;
        
        }
    //showCalendar(2011,0,10);
    </script><body>
    出生年月:<input type="text" id="inputDate" onclick="test()"/>
    </body>
    </html>
      

  3.   

    建议楼主找成熟一点的日历控件吧，比如http://jqueryui.com/demos/datepicker/
    你这个还是很多问题的<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head>
    <script language="javascript">    //alert(111);
    //nowDate表示日期
    function showCalendar(nowYear,nowMonth,nowDate)
    {
        var begin=0;
        var days=0;//该月份的天数
        if(nowMonth==0||nowMonth==2||nowMonth==4||nowMonth==6||nowMonth==7||nowMonth==9||nowMonth==11)
        {
            days=31;
        }
        if(nowMonth==3||nowMonth==5||nowMonth==8||nowMonth==10)
        {
            days=30;    
        }
        if(nowMonth==1)
        {
            if(nowYear%4==0&&nowYear%400!=0)
            {
                days=29;
            }
            else
            {
                days=28;
            }
        }
        var d=new Date(nowYear,nowMonth,1);
        var xq=d.getDay();//获取该月第一天的星期
        
    var strContent='<div id="myCal">'+
           '<table id="tab" width="210px" border="1">'+
            '<tr>'+
             '<td><table width="100%" border="0">'+
                '<tr>'+
                  '<td><table width="100%" border="1" bordercolor="#009933" bgcolor="#009933">'+
                    '<tr bordercolor="#009933">'+
                      '<td align="center" bgcolor="#009933" width="22px" onClick="preYear()">&lt;&lt;</td>'+
                      '<td align="center" bgcolor="#009933" width="22px" onClick=preMonth()>&lt;</td>'+
                      '<td id="chooseYear" align="center" bgcolor="#009933" width="64px" onClick="chooseYear()">'+nowYear+'</td>'+
                      '<td id="chooseMonth" align="center" bgcolor="#009933" width="58px" onClick="chooseMonth()">'+(nowMonth+1)+'</td>'+
                      '<td align="center" bgcolor="#009933" width="22px" onClick=nextMonth()>&gt;</td>'+
                      '<td align="center" bgcolor="#009933" width="22px" onClick=nextYear()>&gt;&gt;</td>'+
                    '</tr>'+
                  '</table></td>'+
                '</tr>'+
                '<tr>'+
                  '<td><table width="100%" border="1"  bordercolor="#009933" bgcolor="#009933">'+
                    '<tr>'+
                      '<td width="14%" align="center" bgcolor="#009933">日</td>'+
                      '<td width="14%" align="center" bgcolor="#009933">一</td>'+
                      '<td width="14%" align="center" bgcolor="#009933">二</td>'+
                      '<td width="14%" align="center" bgcolor="#009933">三</td>'+
                      '<td width="14%" align="center" bgcolor="#009933">四</td>'+
                      '<td width="14%" align="center" bgcolor="#009933">五</td>'+
                      '<td width="14%" align="center" bgcolor="#009933">六</td>'+
                    '</tr>'+
                  '</table></td>'+
                '</tr>'+
                '<tr>'+
                  '<td><table width="100%" border="0">'+
                    '<tr>';
                    document.write(strContent);
                    for(begin=0;begin<xq;begin++)
                    {
                        document.write('<td width="14%" align="center">&nbsp;</td>');
                    }
                    for(var d=1;d<=days;d++)
                    {
                        if(begin%7==0)
                        {
                        
        document.write('</tr>');
        document.write('<tr>');                
                        }
                        document.write('<td id="myTd" width="14%" align="center" bgcolor="#999999" onClick="chooseDate('+d+')"'+
                                    '>'+d+'</td>');
                        begin++;
                    }
                    if(begin%7==0)
                    {
                        document.write('</tr>');
                    }
                    else
                    {
                        while(begin%7!=0)
                        {
                            document.write('<td width="14%" align="center">&nbsp;</td>');
                            begin++;
                        }
                        document.write('</tr>');
                    }                           var strContent2='</table></td>'+
                '</tr>'+
                '<tr>'+
                  '<td><table width="100%" border="0">'+
                    '<tr>'+
                      '<td width="57%" align="center">&nbsp;</td>'+
                      '<td width="22%" align="center" onClick=clearInput()>清空</td>'+
                      '<td width="21%" align="center" onClick=hiddenCalendar()>关闭</td>'+
                    '</tr>'+
                  '</table></td>'+
                '</tr>'+
              '</table></td>'+
            '</tr>'+
          '</table>'+
        '</div>';
        document.write(strContent2);
        allYear=nowYear;
        allMonth=nowMonth;
        allDate=nowDate;
    }
    function preYear()
    {
        if(allYear>1900)
        {
            allYear--;
            //alert(nowYear);
        }
        showCalendar(allYear,allMonth,allDate);
    }
    function nextYear()
    {
        if(allYear<2100)
        {
            allYear++;
        }
        showCalendar(allYear,allMonth,allDate);
    }
    function preMonth()
    {
        if(allMonth>0)
        {
            allMonth--;        
        }
        else
        {
            if(allYear>1900)
            {
                allYear--;
    //            alert(nowMonth);
                allMonth=11;
                
            }
        }
        showCalendar(allYear,allMonth,allDate);
    }
    function nextMonth()
    {
        if(allMonth<11)
        {
            allMonth++;
            //alert(nowYear);
        }
        else 
        {
            if(allYear<2100)
            {
                allYear++;
                allMonth=0;
            }
        }
        showCalendar(allYear,allMonth,allDate);
    }
    function chooseYear()
    {
        var htmlStr='<select onchange="chooseYear_change(this.value)">';
        for(var i=1950;i<=(new Date()).getFullYear();i++)
        {
           if(i==allYear)
           {
              htmlStr+='<option value='+i+' selected="selected">'+i+'</option>';
           }
           else
           {
              htmlStr+='<option value='+i+'>'+i+'</option>';
           }
           
        }
        htmlStr+='</select>';
        document.all.chooseYear.innerHTML=htmlStr;
        
    }
    function chooseYear_change(newYear)
    {
        allYear=newYear;
        showCalendar(allYear,allMonth,allDate);
    }
    function chooseMonth()
    {
        var htmlStr='<select onchange="chooseMonth_change(this.value)">';
        for(var i=0;i<=11;i++)
        {
            if(i==allMonth)
            {
                htmlStr+='<option value='+i+'  selected="selected">'+(i+1)+'</option>';        
            }
            else
            {
                htmlStr+='<option value='+i+'>'+(i+1)+'</option>';
            }
            
        }
        htmlStr+='</select>';
        document.all.chooseMonth.innerHTML=htmlStr;
        
    }
    function chooseMonth_change(newMonth)
    {
        allMonth=parseInt(newMonth);
        showCalendar(allYear,allMonth,allDate);
            
    }
    function chooseDate(newDate)
    {
        allDate=newDate;
        inputDate.value=allYear+'-'+(allMonth+1)+'-'+allDate;
        
    }//function changeColor()
    //{
    //    myTd.style.bgColor="#FFFF00";
    //}function test()
    {
        var now=new Date();
        var allYear=now.getFullYear();
        var allMonth=now.getMonth();
        var allDate=now.getDate();
        showCalendar(allYear,allMonth,allDate);
       var xStr=window.event.x;    
        //alert(xStr);
    //    alert("tab");
        var tab=document.getElementById("tab");
        tab.offsetLeft=xStr;
        tab.offsetTop=0;
        }
    //showCalendar(2011,0,10);
    </script><body>
    出生年月:<input type="text" id="inputDate" onfocus="test()"/>
    </body>
    </html>