首页 > > 网页制作 > Javascript >

错误记录 - dom操作 - 排序

2018-12-24 09:09:44来源：博客园阅读 ()

本次练习错误总结：

1. for循环要套到按钮的onclick里面，否则onclick点击事件无法依次执行。

2. var n1, var n2 这两个变量是arr.sort排序使用的，所以应该放在sort() 函数里面。

3.arr.sort(function (li1,li2) 这个排序函数的li1, li2表示的是arr[ ] 这个数组里随机的两个数，这个命名和之前的aLi无关。不需要调用aLi为变量。

4. for循环 for ( ) 条件语句末尾一定不能写分号。分号表示该段运行结束。条件语句末尾写上分号，for循环的函数就无法依次执行。

注意点：

1. parseInt 把字符串转换为数字，方便排序。

2. 数组排序。（a, b）表示该数组中的随机数。

arr.sort (function(a, b)) {

};

正确代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排序</title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn1');
            var oUl = document.getElementById('ul1');

            oBtn.onclick = function () {
                var aLi = oUl.getElementsByTagName('li');
                var arr = [];

                for ( var i=0; i<aLi.length; i++){    //for循环的括号后面绝对不能加分号！！！！
                    arr[i] = aLi[i];
                }

                arr.sort(function (li1,li2) {
                var n1 = parseInt(li1.innerHTML);
                            var n2 = parseInt(li2.innerHTML);
                            return n1-n2;
                        });


                for (var j=0; j<arr.length; j++) {
                    oUl.appendChild(arr[j]);
                }
            }
        }
    </script>
</head>
<body>
<input id="btn1" type="button" value="排序">
<ul id="ul1">
    <li>12</li>
    <li>72</li>
    <li>114</li>
    <li>5552</li>
    <li>78</li>
    <li>3</li>
</ul>
</body>
</html>

第一次的错误代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排序</title>
    <script>
        window.onload = function () {
            var oUl = document.getElementById('ul1');
            var oBtn = document.getElementById('btn1');
            var aLi = oUl.getElementsByTagName('li');
            var arr = [];
            
            for (var i=0; i<aLi.length; i++)  // for循环要套到按钮的onclick里面！！！！
            {
                arr[i] = aLi[i];
            } 
            oBtn.onclick = function ()  //onclick事件在前，for循环在后！
            {
                var n1 = parseInt(aLi[i].innerHTML)
                //这两个变量是arr.sort排序使用的，所以应该放在sort函数里面。。
                //可以试一下放在外面能不能顺利执行
                var n2 = parseInt(aLi[i].innerHTML)

                arr.sort(function (aLi1,aLi2) { //这个函数的参数怎么写？？
                    return n1-n2;
                })
            }
        }
    </script>
</head>
<body>
<input id="btn1" type="button" value="排序">
<ul id="ul1">
    <li>266</li>
    <li>115</li>
    <li>86</li>
    <li>6</li>
    <li>420</li>
</ul>
</body>
</html>