Loop doesn't iterate through my array properly?

var $ = function (id) { return document.getElementById(id); };
var scoreValues = []
var studentsScores = []
var html = "";
var displayScores = function () {
  for (var i = 0; i < studentsScores.length; i++) {
    html = html.concat(studentsScores[i]["firstName"], " ", studentsScores[i]["lastName"], ": ", studentsScores[i]["score"])
  }

$("scores").innerHTML = html
};

var addScore = function () {
    var score = parseInt($("score").value);
    scoreValues.push(score)
    var counter = 0;
    var totalScoresValue = 0;
    while(counter !== scoreValues.length) {
      totalScoresValue += scoreValues[counter];
      counter += 1;
    }

    var average = totalScoresValue / counter;
    $('average_score').value = average;

    var newStudent = {
    firstName : $("first_name").value,
    lastName : $("last_name").value,
    score : $("score").value
  };

  studentsScores.push(newStudent)
    // get the add form ready for next entry
    $("first_name").value = "";
    $("last_name").value = "";
    $("score").value = "";
    $("first_name").focus();

    displayScores();
};

var clearScores = function () {


    // remove the score data from the web page
    $("average_score").value = "";
    $("scores").value = "";

    $("first_name").focus();
};

var sortScores = function () {

};

window.onload = function () {
    $("add_button").onclick = addScore;
    $("clear_button").onclick = clearScores;
    $("sort_button").onclick = sortScores;
    $("first_name").focus();
};