JS錯誤記錄 – dom操作 – 排序

CarpenterZoe發表於2018-12-21
JS排序

 

本次練習錯誤總結：

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>

 

相關文章