Error logging - dom operation - sort

Error summary of this exercise:

1. The for loop should be inserted into the onclick of the button, otherwise the onclick click event cannot be executed in sequence.

2. The two variables var N1 and VaR N2 are used in the sort of arr.sort, so they should be put in the sort() function.

3. The Li1 and Li2 of the sorting function arr.sort (function (li1, li2) represent two random numbers in the array arr [], which has nothing to do with the previous aLi. You do not need to call aLi as a variable.

4. The semicolon must not be written at the end of the for loop for() conditional statement. Semicolon indicates the end of the segment. If a semicolon is written at the end of a conditional statement, the functions of the for loop cannot be executed in sequence.

Note:

1. parseInt converts a string to a number to facilitate sorting.

2. Array sorting. (a, b) represents the random number in the array.

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

};

Correct code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sort</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 The semicolon must not be added after the parenthesis of the cycle!!!!
                    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="sort">
<ul id="ul1">
    <li>12</li>
    <li>72</li>
    <li>114</li>
    <li>5552</li>
    <li>78</li>
    <li>3</li>
</ul>
</body>
</html>

First error code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sort</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 Loop to button onclick Inside!!!!
            {
                arr[i] = aLi[i];
            } 
            oBtn.onclick = function ()  //onclick The event is ahead, for Cycle after!
            {
                var n1 = parseInt(aLi[i].innerHTML)
                //These two variables are arr.sort Sorting is used, so it should be placed in the sort Function..
                //You can try to put it outside to see if it works
                var n2 = parseInt(aLi[i].innerHTML)

                arr.sort(function (aLi1,aLi2) { //How to write the parameters of this function??
                    return n1-n2;
                })
            }
        }
    </script>
</head>
<body>
<input id="btn1" type="button" value="sort">
<ul id="ul1">
    <li>266</li>
    <li>115</li>
    <li>86</li>
    <li>6</li>
    <li>420</li>
</ul>
</body>
</html>

Posted by dangyadang on Sat, 07 Dec 2019 10:55:57 -0800

Programmer Group

Error logging - dom operation - sort

Hot Keywords