title: Student scores array, average function not implementing
body: <p>I have an assignment for my first JavaScript class to create an application that takes the last name, first name, and score as input for a student. The app should keep a running average of the scores and provide a button to clear the scores, as well as a button to sort by last name. I have everything working except for the average function. I wrote it, but it isn't implementing. I may be missing something completely simple. I would really appreciate any assistance that you could offer. Thank you for your time!</p>
  
  <p>.js file: </p>
  
  <pre><code>var $ = function (id) {
      return document.getElementById(id);
  }
  
  //the dreaded $ variable
  
  var grades = [];
  //array
  
  //update scores with scores, first, last, sort by last
  var update_scores = function () {
          var val = get_item_list(grades);
          $("scores").value = val;
          $("last_name").value = "";
          $("first_name").value = "";
          $("score").value = "";
          $("last_name").focus();
      }
      //function to add last, first, score to studentGrade
  var student_grade_add_click = function () {
  
  
      var last = $("last_name").value;
      var first = $('first_name').value;
      var score = parseFloat($('score').value);
  
      grades.push([last, first, score]);
      update_scores();
  }
  
  
  var get_item_list = function (item_list) {
      if (item_list.length == 0) {
          return "";
      }
      var list = "";
      for (var i = 0; i &lt; item_list.length; i++) {
          var current = item_list[i];
          for (var attribute in current) {
              list += current[attribute] + ", ";
          }
          list += "\n";
      }
      return list;
  }
  
  //average function
  function getAverageScore(grades) { //function-takes grades array
      var i; //declare variable
      var numberOfStudents = grades.length; //declare variable along length  of array for number of students
      var sum = 0; //set sum to zero
      if (numberStudents &gt; 0) { // step through grades if &gt; 0 students
          for (i = 0; i &lt; numberOfStudents; i++) { //increment by 1 through grades
              sum += grades[i][2]; //add each score to sum
          }
          return sum / numberOfStudents; //divide total of sum by how many students
      }
      return 0; // if no students, return 0
  }
  
  function clear_click() {
      $("form").reset();
  
      grades.splice(0, grades.length); //TO CLEAR ARRAY AS WELL AS FORM
  }
  
  var sort_click = function () //ENTIRE FUNCTION TO SORT ARRAY AND REPRINT
      {
          grades.sort();
          update_scores();
      }
  
  window.onload = function () {
  
      $("add_button").onclick = student_grade_add_click;
      $("sort_button").onclick = sort_click;
      $("last_name").focus();
  }
  </code></pre>
  
  <p>And here is my .html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
  &lt;title&gt;Part 4&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="scores.css" /&gt;
  &lt;script type="text/javascript" src="scores.js"&gt;&lt;/script&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="content"&gt;
      &lt;h1&gt;Student Scores&lt;/h1&gt;
      &lt;div class="formLayout"&gt;
          &lt;label&gt;Last Name:&lt;/label&gt;
          &lt;input type="text" id="last_name"/&gt;&lt;br/&gt;
  
          &lt;label&gt;First Name:&lt;/label&gt;
          &lt;input type="text" id="first_name"/&gt;&lt;br/&gt;
  
          &lt;label&gt;Score:&lt;/label&gt;
          &lt;input type="text" id="score"/&gt;&lt;br/&gt;
  
          &lt;label&gt;&amp;nbsp;&lt;/label&gt;
          &lt;input type="button" id="add_button" value="Add Student Score"/&gt;&lt;br/&gt;
      &lt;/div&gt;
      &lt;h2&gt;Student Scores&lt;/h2&gt;
  &lt;form id = "form"&gt;
      &lt;p&gt;&lt;textarea id="scores" rows="5" cols="60" disabled="disabled"&gt;&lt;/textarea&gt;&lt;/p&gt;
  &lt;/form&gt;
      &lt;div class="formLayout"&gt;
          &lt;label&gt;Average score:&lt;/label&gt;
          &lt;input type="text" id="average_score" disabled="disabled"/&gt;&lt;br/&gt;
  
          &lt;label&gt;&amp;nbsp;&lt;/label&gt;
          &lt;input type="button" id="clear" value="Clear Student Scores" onclick="clear_click()"/&gt;&lt;br/&gt;
  
          &lt;label&gt;&amp;nbsp;&lt;/label&gt;
          &lt;input type="button" id="sort_button" value="Sort By Last Name"/&gt;&lt;br/&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;     
  </code></pre>