本次練習錯誤總結： 1. for迴圈要套到按鈕的onclick裡面，否則onclick點擊事件無法依次執行。 2. var n1, var n2 這兩個變數是arr.sort排序使用的，所以應該放在sort() 函數裡面。 3.arr.sort(function (li1,li2) 這個排序函數的l ...
本次練習錯誤總結：
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>
