为什么会报错 求大神指教


<!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=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function(){
var imgw = document.getElementById('wrap');
var btn = imgw.getElementsByTagName('span');
var num = imgw.getElementsByTagName('em');

for(var i=0; i<btn.length; i++){
btn[i].onclick = function(){
alert(num[i].innerHTML);
}
}
}
</script>
</head><body>
<ul id="wrap">
<li>
<span>喜欢</span>
<em>0</em>
</li>
<li>
<span>喜欢</span>
<em>1</em>
</li>
</ul>
</body>
</html>
TypeError: num[i] is undefined
alert(num[i].innerHTML);为什么说没定义呢  要怎么样才能 输出 num每个的innerHTML

解决方案 »

  1.   


     for(var i=0; i<btn.length; i++){
                btn[i].onclick = function(){
                   alert(i)
                }
            }  
    打印下看看就明白了；
      

  2.   

    闭包
    i 在退出 for 之后 已经变成了 2for(var i=0; i<btn.length; i++){
                (function(i){
                btn[i].onclick = function(){
                    alert(num[i].innerHTML);
                }
                })(i);
            }  
      

  3.   

    这样就可以了
    <!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=utf-8" />
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            var imgw = document.getElementById('wrap');
            var btn = imgw.getElementsByTagName('span');
            var num = imgw.getElementsByTagName('em');
             
            for(var i=0; i<btn.length; i++){
              (function(){
                var m = i;
                btn[i].onclick = function(){
                    alert(m);
                }
              })(i);
            }   
        }
    </script>
    </head>
     
    <body>
        <ul id="wrap">
            <li>
                <span>喜欢</span>
                <em>0</em>
            </li>
            <li>
                <span>喜欢</span>
                <em>1</em>
            </li>
        </ul>
    </body>
    </html>
      

  4.   

    知道了   汗 最后一个问题  怎么让em 和 span绑定呢我现在的需求是  点击span 喜欢变成 已喜欢 然后 em 从0 + 1我现在实现了 点击span 但是我不知道 如何获取同个li下的 embtn[i].onclick = function(){
           alert(this.nextSbiling);
    }
    这样也打印不出来 em