关于递归的问题，求解答！

<html>
  <head>
    <title>Js</title>
<style>
body{padding:40px;}
*{padding:0; margin:0;}
ul{height:26px; border-right:1px solid #ddd; clear:both;}
li{list-style:none; float:left; padding:4px 0; background:#eee; width:79px; text-align:center; border:1px solid #ddd; border-right:0; cursor:pointer;}
.dd{background:#fff; border-bottom:#fff;}
a{color:#f55efe; text-decoration:none;}
a:hover{color:#ff0080;}
#xx{width:321px;}
.div{float:left; width:319px;}
.divwrap{width:319px; overflow:hidden; position:relative; height:80px; border:1px solid #ddd; border-top:0;}
</style>
    <script type="text/javascript">       
        function dfggg(btn,box,emwidth,time){
            var obtns = document.getElementById(btn);
            var oli = obtns.getElementsByTagName("li");
            var odivs = document.getElementById(box);
            var odivli = odivs.getElementsByTagName("div");
            odivs.style.width = odivli.length * emwidth + "px";
            odivs.style.left = "0px";
            odivs.style.position = "absolute";
            for (var i = 0; i < oli.length; i++){
                oli[i].onmouseover = function() {
                 return show(this);
                }
            }
            function show(x){
                for(var i = 0; i < odivli.length; i++){
                    if( x == oli[i] ){
                        oli[i].className = "dd";
                        var emwidths = -((i) * emwidth);
                        moveElement(odivs,emwidths,time);
                    }else{
                        oli[i].className = "";
                    }
                }
            }
        }
        function moveElement(elementId,emwidths,time){
           // xpot = parseInt(elementId.style.left);
            alert(elementId.style.left)
            if(elementId.ffd){
                clearTimeout(elementId.ffd)
            }
           // alert(emwidths);
            /*if(xpot < emwidths){
                xpot = xpot + Math.ceil((emwidths - xpot)/10);
                elementId.style.left = xpot + "px"
            }
            if(xpot > emwidths){
                xpot = xpot - Math.ceil((xpot - emwidths)/10);
                elementId.style.left = xpot + "px"
            }*/
            var erm = "moveElement('"+elementId+"',"+emwidths+","+time+")";
            elementId.ffd = setTimeout(erm,time);
        }
        window.onload = stateChange;//当页面加载状态改变的时候执行这个方法
function stateChange(){//当页面加载状态为完全结束时进入
        if(document.readyState == "complete"){
         dfggg("obtn","odiv",319,20)
        }
}
    </script>
  </head>
  <body>  
    <div id="xx">
     <ul id="obtn">
     <li class="dd">111111</li>
     <li>222222</li>
     <li>333333</li>
     <li>444444</li>
     </ul>
     <div class="divwrap">
            <div id="odiv">
     <div class="div">
     <p>111111111</p>
     <p>111111111</p>
     <p>111111111</p>
     <p>111111111</p>
     </div>
     <div class="div">
     <p>222222222</p>
     <p>222222222</p>
     <p>222222222</p>
     <p>222222222</p>
     </div>
     <div class="div">
     <p>333333333</p>
     <p>333333333</p>
     <p>333333333</p>
     <p>333333333</p>
     </div>
     <div class="div">
     <p>444444444</p>
     <p>444444444</p>
     <p>444444444</p>
     <p>444444444</p>
     </div>
     </div>
</div>
    </div>
  </body>
</html> 运行代码之后会报elementId.style is undefined的错误。但是函数体本身已运行一次，很明显是在运行到第2遍时才报错的。

解决方案 »

  1.   


            function dfggg(btn,box,emwidth,time){
                var obtns = document.getElementById(btn);
                var oli = obtns.getElementsByTagName("li");
                var odivs = document.getElementById(box);
                var odivli = odivs.getElementsByTagName("div");
                odivs.style.width = odivli.length * emwidth + "px";
                odivs.style.left = "0px";
                odivs.style.position = "absolute";
                for (var i = 0; i < oli.length; i++){
                    oli[i].onmouseover = function() {
                     return show(this);
                    }
                }
                function show(x){
                    for(var i = 0; i < odivli.length; i++){
                        if( x == oli[i] ){
                            oli[i].className = "dd";
                            var emwidths = -((i) * emwidth);
                            // moveElement(odivs,emwidths,time);
                            moveElement(odivs.id,emwidths,time);
                        }else{
                            oli[i].className = "";
                        }
                    }
                }
            }
            function moveElement(elementIds,emwidths,time){
        var elementId = document.getElementById(elementIds);
                xpot = parseInt(elementId.style.left);
                if(elementId.ffd){
                    clearTimeout(elementId.ffd)
                }
                if(xpot < emwidths){
                    xpot = xpot + Math.ceil((emwidths - xpot)/10);
                    elementId.style.left = xpot + "px"
                }
                if(xpot > emwidths){
                    xpot = xpot - Math.ceil((xpot - emwidths)/10);
                    elementId.style.left = xpot + "px"
                }
                // 问题出在这个地方，你原来的代码把一个Object拼接到字符串中去...
                // var erm = "moveElement('"+elementId+"',"+emwidths+","+time+")";
                var erm = "moveElement('"+elementIds+"',"+emwidths+","+time+")";
                elementId.ffd = setTimeout(erm,time);
            }
            window.onload = stateChange;
            function stateChange(){
                if(document.readyState == "complete"){
                    dfggg("obtn","odiv",319,20)
                }
            }
        </script>
      

  2.   

    谢谢3楼。但问题不是出在哪里。
      是因为参数的问题，刚开始传进去的参数是一个叫 odivs /*var odivs = document.getElementById(box);*/的节点，然后第二次传进去的就是elementId了。而且没有做声明。elementId只是moveElement()函数的一个参数，所以才会出错。下面是我修改后的代码。
    <html>
      <head>
        <title>Js</title>
    <style>
    body{padding:40px;}
    *{padding:0; margin:0;}
    ul{height:26px; border-right:1px solid #ddd; clear:both;}
    li{list-style:none; float:left; padding:4px 0; background:#eee; width:79px; text-align:center; border:1px solid #ddd; border-right:0; cursor:pointer;}
    .dd{background:#fff; border-bottom:#fff;}
    a{color:#f55efe; text-decoration:none;}
    a:hover{color:#ff0080;}
    #xx{width:321px;}
    .div{float:left; width:319px; height:80px;}
    .divwrap{width:319px; overflow:hidden; position:relative; height:80px; border:1px solid #ddd; border-top:0;}
    </style>
        <script type="text/javascript">       
            function dfggg(btn,box,emwidth,time){
                var obtns = document.getElementById(btn);
                var oli = obtns.getElementsByTagName("li");
                var odivs = document.getElementById(box);
                var odivli = odivs.getElementsByTagName("div");
                odivs.style.width = odivli.length * emwidth + "px";
                odivs.style.left = "0px";
                odivs.style.position = "absolute";
                for (var i = 0; i < oli.length; i++){
                    oli[i].onmouseover = function() {
                     return show(this);
                    }
                }
                function show(x){
                    for(var i = 0; i < odivli.length; i++){
                        if( x == oli[i] ){
                            oli[i].className = "dd";
                            var emwidths = -((i) * emwidth);
                            moveElement(box,emwidths,time);
                        }else{
                            oli[i].className = "";
                        }
                    }
                }
            }
            function moveElement(box,emwidths,time){
                var elementId = document.getElementById(box);
                xpot = parseInt(elementId.style.left);
                //alert(elementId.style.left)
                if(elementId.ffd){
                    clearTimeout(elementId.ffd)
                }
               // alert(emwidths);
                if(xpot < emwidths){
                    xpot = xpot + Math.ceil((emwidths - xpot)/10);
                    elementId.style.left = xpot + "px"
                }
                if(xpot > emwidths){
                    xpot = xpot - Math.ceil((xpot - emwidths)/10);
                    elementId.style.left = xpot + "px"
                }
                var erm = "moveElement('"+box+"',"+emwidths+","+time+")";
                elementId.ffd = setTimeout(erm,time);
            }
            window.onload = stateChange;//当页面加载状态改变的时候执行这个方法
    function stateChange(){//当页面加载状态为完全结束时进入
            if(document.readyState == "complete"){
             dfggg("obtn","odiv",319,20)
            }
    }
        </script>
      </head>
      <body>  
        <div id="xx">
         <ul id="obtn">
         <li class="dd">111111</li>
         <li>222222</li>
         <li>333333</li>
         <li>444444</li>
         </ul>
         <div class="divwrap">
                <div id="odiv">
         <div class="div" style="background:#c9ffed">
         <p>111111111</p>
         <p>111111111</p>
         <p>111111111</p>
         <p>111111111</p>
         </div>
         <div class="div" style="background:#c9edff">
         <p>222222222</p>
         <p>222222222</p>
         <p>222222222</p>
         <p>222222222</p>
         </div>
         <div class="div" style="background:#ffe5c9">
         <p>333333333</p>
         <p>333333333</p>
         <p>333333333</p>
         <p>333333333</p>
         </div>
         <div class="div" style="background:#ffd7ee">
         <p>444444444</p>
         <p>444444444</p>
         <p>444444444</p>
         <p>444444444</p>
         </div>
         </div>
    </div>
        </div>
      </body>
    </html> 
      

  3.   

    嗯，这样也对，我没有仔细看前面的代码，box其实就是odivs.id...