This question is an exact duplicate of:
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>