在Javascript中排序数组时出现意外错误[重复]

I am trying to sort an array in Javascript but something goes wrong and I can't figure out why. The problem is that the output is wrong, because some of the array elements are marked as "undefined" and have no value after I call the myFunc function. What I expect to see is the elements sorted in descending order. But instead of that I get some of the fields with the text "undefined" in them.

here you the Javascript code:

var arr = [1, 123, 2, 321, 341, 2];
/*var arr = [];
arr[0] = 1;
arr[1] = 123;
arr[2] = 2;
arr[3] = 321;
arr[4] = 341;
arr[5] = 2;*/

function selectionsort(){
    var n = 6;
    for(var i=0; i<n-1; i++)
    {
        var index = i;
        for(var j=i+1; j<n; j++)
        {
            if(arr[index]<arr[j])
            {
                index = j;
            }
        }
        console.log(arr[index]);
        if(index != i)
        {
            var temp = arr[j];
            arr[i] = arr[index];
            arr[index] = temp;
        }
    }
}

function initFunc()
{
        document.getElementById("asdf").innerHTML = arr[0];
        document.getElementById("asdf1").innerHTML = arr[1];
        document.getElementById("asdf2").innerHTML = arr[2];
        document.getElementById("asdf3").innerHTML = arr[3];
        document.getElementById("asdf4").innerHTML = arr[4];
        document.getElementById("asdf5").innerHTML = arr[5];

        document.getElementById("demoto+0").innerHTML = arr[0];
        document.getElementById("demoto+1").innerHTML = arr[1];
        document.getElementById("demoto+2").innerHTML = arr[2];
        document.getElementById("demoto+3").innerHTML = arr[3];
        document.getElementById("demoto+4").innerHTML = arr[4];
        document.getElementById("demoto+5").innerHTML = arr[5]; 
}

function myFunc(){  
        document.getElementById("demoto+0").innerHTML = arr[0];
        document.getElementById("demoto+1").innerHTML = arr[1];
        document.getElementById("demoto+2").innerHTML = arr[2];
        document.getElementById("demoto+3").innerHTML = arr[3];
        document.getElementById("demoto+4").innerHTML = arr[4];
        document.getElementById("demoto+5").innerHTML = arr[5];     

        selectionsort();

        document.getElementById("asdf").innerHTML = arr[0];
        document.getElementById("asdf1").innerHTML = arr[1];
        document.getElementById("asdf2").innerHTML = arr[2];
        document.getElementById("asdf3").innerHTML = arr[3];
        document.getElementById("asdf4").innerHTML = arr[4];
        document.getElementById("asdf5").innerHTML = arr[5];
}

and that's the html page that is manipulated:

<button type="button" onclick="myFunc()">click</button>
<div class="wrapper">
            <div class="order">
            <ul id="boxes">
            <li><div id="demoto+0" class="transperant"></div></li>
            <li><div id="demoto+1" class="transperant"></div></li>
            <li><div id="demoto+2" class="transperant"></div></li>
            <li><div id="demoto+3" class="transperant"></div></li>
            <li><div id="demoto+4" class="transperant"></div></li>
            <li><div id="demoto+5" class="transperant"></div></li>
            </ul>
            </div>
        <br>
            <div class="order2">
            <ul id = "boxes">
            <li><div id="asdf" class="transperant">S</div></li>
            <li><div id="asdf1" class="transperant">S</div></li>
            <li><div id="asdf2" class="transperant">S</div></li>
            <li><div id="asdf3" class="transperant">S</div></li>
            <li><div id="asdf4" class="transperant">S</div></li>
            <li><div id="asdf5" class="transperant">S</div></li>
            </ul>
            </div>
        </div>

</div>

You could just use the sort() method on your array. LIke this: arr.sort()

Do you really need to reinvent the wheel? Just use

[1, 123, 2, 321, 341, 2].sort(function(a,b){return a-b;});