Question

Here is my code so far for my school project (using Murach’s JavaScript and DOM Scripting by Ray Harris). The chapter is only about Arrays and does not cover Prototypes, but I wanted to try it out based on Internet tutorials and references:

 /*
Operation

    This application stores the last name, first name, and score for 
    one or more students and it calculates the average score for all of the scores
    that have been entered. When the user clicks on the Clear button, this 
    application clears the score data from this application. When the user clicks 
    on the Sort button, this application sorts the data in alphabetical order by 
    last name.

Specifications

    The program should use one or more arrays to store the data.
    Assume that the user will enter valid data.
*/
var $ = function (id) 
{ 
    return document.getElementById(id); 
}

/*
Array prototype object extension for averaging the contents

"Adding a method to the built-in Array object to extract the average 
of any numerical values stored in the array is therefore a useful 
addition to that object." http://javascript.about.com/library/blaravg.htm
*/
Array.prototype.average = function () 
{
    var avg = 0;
    var count = 0;
    for (var i = 0; i<this.length; i++) 
    {
       //never gets here:
        alert(i + ": " + this[i]);
        var e = +this[i];
        if(!e && this[i] !== 0 && this[i] !== '0') 
        {
            e--;
        }
        if (this[i] == e) 
        {
            avg += e;
            count++;
        }
    }   
    return avg / count;
}

var addScore = function ()
{
    studentScores[$('last_name').value + ', ' + $('first_name').value] = $('score').value;
    update();
}

var clearScore = function ()
{
    for (var i in studentScores)
    {
        studentScores[i] = '';
    }
    update();
}

var sortScore = function ()
{
    scores.sort();
    update();
}

var update = function ()
{
    var result = '';
    for (var i in studentScores)
    {
        result += (i + ': ' + studentScores[i] + '\n');
    }
    $('scores').value = result;
    $('average_score').value = studentScores.average().toFixed(1);
}

window.onload = function ()
{
    //a variable is initialized inside a function without var, it will have a global scope:
    studentScores = [];
    $('add_button').onclick = addScore;
    $('sort_button').onclick = sortScore;
    $('clear_button').onclick = clearScore;
    $('last_name').focus();
}

When the code enters the “update()” function (end of the “addScore()” function) and accesses the array,
it populates the “literal” code from the Prototype into the text area (and fails to find the average on the next line):

I don’t have enough rep points to post the image, but here is my output (there are no errors in the Chrome JS Console):

lowe, doug: 82
average: function () 
{
    var avg = 0;
    var count = 0;
    for (var i = 0; i<this.length; i++) 
    {
        //never gets here:
        alert(i + ": " + this[i]);
        var e = +this[i];
        if(!e && this[i] !== 0 && this[i] !== '0') 
        {
            e--;
        }
        if (this[i] == e) 
        {
            avg += e;
            count++;
        }
    }   
    return avg / count;
}

Any help appreciated (best practice or algorithm suggestions welcome)

Answer 1

Change this:

studentScores = []

to this:

studentScores = {}

…so that you’re using an Object instead of an Array.

Your for loop in average() is just iterating numeric indices instead of the non-numeric keys you created.

Create your average() method as a standalone function like the others, and pass studentScores to it to calculate the average, and then use for-in instead of for.