求高手指点为什么事件中不响应编写的画线函数？

设计了一个画直线的函数，单独能画，编写一鼠标点击事件，事件能响应，在事件中加入该画线函数，就熄火了，请大家帮忙看看！不胜感激！！代码如下：<html>
<SCRIPT LANGUAGE="JavaScript">color = "red"
//画点函数定义
function point(x,y,w,h){
document.write('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')
//body.innerHTML='<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>';
}
//辅助函数
function max(a){
if (a<1) {
return(1)
         }
else
{
return(a)
}
}//画线
function drawLine(x0,y0,x1,y1)
{
//alert(1)
if(x0==x1 || y1==y0) 
{
point(x0,y0,max(Math.abs(x1-x0)),max(Math.abs(y1-y0)));
}
else
{
var dx = x1-x0
var dy = y1-y0
var delta= Math.sqrt(dx*dx+dy*dy)//alert(1)
for (var I=0;I<delta;I+=1)
{
var p = I/delta;
var px = x0 + dx*p;
var py = y0 + dy*p;point(px,py,1,1);
}
}
}
//变量初始化
var sX = 0;
var sY = 0;
var eX = 0;
var eY = 0;
var fline=false;//drawLine(453,294,635,272);
drawLine(1,1,635,272);//这里调用一次，证明画线函数能用
//定义点击响应事件
function click()
{
 if(fline)         //fline为真，划直线
 {
   eX = event.clientX;    //末尾点
   eY = event.clientY;   fline=false;
alert(eX);//证明点击事件能用，且已经正确产生4个坐标
alert(eY);
alert(sX);
alert(sY);
drawLine(sX,sY,eX,eY);//加了这个画线函数没有反应？为什么？？？？？？？？？？？？？
  }
  else
  {
     fline=true;
     sX = event.clientX;  //开始点
     sY = event.clientY;
  }
}
window.onload=function(){
var oline=document.getElementById("line");
oline.onclick=click;
//alert(oline)
}
</SCRIPT>
<body id="line">
<div 
</div>
</body>
</html>

解决方案 »

  1.   

    改后代码：
    <html>
    <SCRIPT LANGUAGE="JavaScript">color = "red"
    //画点函数定义
    function point(x,y,w,h){
    //document.write('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')
    var a=document.createElement("span");
    a.style.position="absolute";
    a.style.left = x;
    a.style.top = y
    a.style.height = h;
    a.style.width = w;
    a.style.fontSize = 1;
    a.style.background = color;
    document.getElementById("line").appendChild(a);
    //body.innerHTML='<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>';
    }
    //辅助函数
    function max(a){
    if (a<1) {
    return(1)
       }
    else
    {
    return(a)
    }
    }//画线
    function drawLine(x0,y0,x1,y1)
    {
    //alert(1)
    if(x0==x1 || y1==y0)  
    {
    point(x0,y0,max(Math.abs(x1-x0)),max(Math.abs(y1-y0)));
    }
    else
    {
    var dx = x1-x0
    var dy = y1-y0
    var delta= Math.sqrt(dx*dx+dy*dy)//alert(1)
    for (var I=0;I<delta;I+=1)
    {
    var p = I/delta;
    var px = x0 + dx*p;
    var py = y0 + dy*p;point(px,py,1,1);
    }
    }
    }
    //变量初始化
    var sX = 0;
    var sY = 0;
    var eX = 0;
    var eY = 0;
    var fline=false;//drawLine(453,294,635,272);
    //drawLine(1,1,635,272);//这里调用一次，证明画线函数能用
    //定义点击响应事件
    function click()
    {
    //alert("click");
      if(fline) //fline为真，划直线
      {
       alert("终点");
       eX = event.clientX; //末尾点
       eY = event.clientY;   fline=false;
    //alert(eX);//证明点击事件能用，且已经正确产生4个坐标
    //alert(eY);
    //alert(sX);
    //alert(sY);
    drawLine(sX,sY,eX,eY);//加了这个画线函数没有反应？为什么？？？？？？？？？？？？？
       }
       else
       {
       alert("起点");
       fline=true;
       sX = event.clientX; //开始点
       sY = event.clientY;
       }
    }
    window.onload=function(){
    var oline=document.getElementById("line1");
    oline.onclick=click;
    //alert(oline)
    }
    </SCRIPT>
    <body id="line1">
    <div id="line">
    </div>
    </body>
    </html>
      

  2.   

     
    AMinfo,非常感谢，可是能告诉我为什么吗？
      

  3.   

    文档流关闭后再使用document.write输出，会覆盖当前页面内容