sorting Javascript arrays

Question

I need this code to sort by last name, first name, or score depending on what the user wants to sort by. I have the last name sort function working properly, problem is when I choose sort by score it sorts the scores but the output is not the list that I need. It just pulls the scores and concatenates them in the text area. I can't figure out how to reach inside the array of students to grab the other information I need displayed. Please help. here is my code

var $ = function (id) {
    return document.getElementById(id);
}


var Scores = [];
var Students = []; 
var results = ""; 

var calculate_click = function (){

    var lastName = $("last_name").value; 
    var firstName = $("first_name").value; 
    var score = parseInt($("score").value); 

    Scores.push(score);


    var student = lastName.toString() + ", " + firstName.toString() + ": " + score.toString() + "\n"; 

    Students.push(student); 

    results += student; 
    $("name_list").value = results;  
    calculateAverage(); 
    }

var calculateAverage = function () { 
    var score = 0; 
    if(Scores.length > 0) {  
        for(var n = 0; n < Scores.length; n++) 
        { score += Scores [n];
        }
        score = score/Scores.length 
    }

    $("aver_area").value = score; 
}

window.onload = function() {
    $("submit_score").onclick = calculate_click; 
    $("clear").onclick = clear_click; 
    $("sort_name").onclick = sort_click;
    $("sort_score").onclick = sort_score;  
}

var clear_click = function() {  
    Scores = [];
    Students = [];
    results = "";
    $("name_list").value = results;
    calculateAverage ();
}

var sort_click = function() {  
    Students.sort();
    results = "";
    for(var n = 0; n < Students.length; n++)
        { results += Students[n];
        }
        $("name_list").value = results;
}

var sort_score = function() {  
    Scores.sort();
    results = "";
    for(var n = 0; n < Scores.length; n++)
        { results += Scores[n];
        }
        $("name_list").value = results;
}

Answer 1

How do you maintain the link between the student and the score?

Easiest way is to create an object per student like following:

var students=[]; //array of student objects  
students[0]={firstName:"George", lastName:"Washington" score: 100}; //student object 1
students[1]={firstName:"Bill", lastName:"Clinton" score: 69}; //student object 2

And then create various sorting functions:

function sortByLastName(a, b){
 var nameA=a.lastName.toLowerCase(), nameB=b.lastName.toLowerCase()
 if (nameA < nameB) //sort string ascending
  return -1 
 if (nameA > nameB)
  return 1
 return 0 //default return value (no sorting)
}

You can then pass this sorting function to the array to sort. Eg:

students.sort(sortByLastName);

More info: http://www.w3schools.com/jsref/jsref_sort.asp http://www.javascriptkit.com/javatutors/arraysort2.shtml