javascript array displaying undefined in text area

Question

So I am working on some home work right now and am having trouble understanding why my array is showing as undefined. Sorry if this is simple, but I am pretty new at this. I will try to explain what I am doing here.

I have three input fields where I gather a students last name, first name and grade. I get all those elements by their id's and put all those inputs into an array called studentGrade. I then push the contents of that array into another array called grades to then pass that as a parameter to a function called get_item_list. from there I try to loop through the contents of that parameter so that I can display it to the text field with the id of "scores".

I really appreciate all the input and hope I can learn what I am doing wrong.

var grades = [];

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

var update_display = function () {
    $("scores").value = get_item_list(grades);

    $("last_name").value = "";
    $("first_name").value = "";
    $("score").value = "";

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

var student_grade_add_click = function() {
    var studentGrade = [];
    studentGrade["last_name"] = $("last_name").value;
    studentGrade["first_name"] = $("first_name").value;
    studentGrade["score"] = parseFloat($("score").value);

    if ( studentGrade["last_name"] == "" ) return;
    if ( studentGrade["last_name"] == "" ) return;
    if ( isNaN(studentGrade["score"]) ) return;

    grades.push(studentGrade);
    update_display();
}

var get_item_list = function(item_list) {
    if ( item_list.length == 0 ) {
       return "";
    }
    var list;
    for ( var i in item_list ) {
        list += item_list[i] + "\n";
    }
    return list;
}

window.onload = function () {
    $("add_button").onclick = student_grade_add_click;
    $("last_name").focus();
}

this is the javascript I am working with

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Student Scores</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="student_scores.js"></script>
</head>

<body>
<div id="content">
    <h1>Student Scores</h1>
    <div class="formLayout">
        <label>Last Name:</label>
        <input type="text" id="last_name" /><br />

        <label>First Name:</label>
        <input type="text" id="first_name" /><br />

        <label>Score:</label>
        <input type="text" id="score" /><br />

        <label>&nbsp;</label>
        <input type="button" id="add_button" value="Add Student Score" /><br />
     </div>
    <h2>Student Scores</h2>
    <p><textarea id="scores" rows="5" cols="60"></textarea></p>
     <div class="formLayout">
        <label>Average score:</label>
        <input type="text" id="average_score"/><br />

        <label>&nbsp;</label>
        <input type="button" id="clear_button" value="Clear Student Scores" /><br />

        <label>&nbsp;</label>
        <input type="button" id="sort_button" value="Sort By Last Name" /><br />
    </div>
</body>
</html>

and there is the html I have made, thanks again.

can you add this in a jsfiddle?

Abhidev
– Abhidev

2013-12-13 06:16:35 +00:00
Commented Dec 13, 2013 at 6:16 — Abhidev
– Abhidev, Commented Dec 13, 2013 at 6:16
jsfiddle.net/LFhNQ hope that helps.

Daniel Adriano Sipos Convery
– Daniel Adriano Sipos Convery

2013-12-13 06:22:53 +00:00
Commented Dec 13, 2013 at 6:22 — Daniel Adriano Sipos Convery
– Daniel Adriano Sipos Convery, Commented Dec 13, 2013 at 6:22

Rob M. · Accepted Answer · 2013-12-13 06:30:13Z

1

I think you need to initialize list as a string prior to concatenating values to it:

var get_item_list = function(item_list) {
    if ( item_list.length == 0 ) {
       return "";
    }
    var list = "";
    for ( var i = 0; i < item_list.length; i++) {
       var current = item_list[i];
       for ( var attr in current ) {
           list += current[attr] + "\n";
       }
    }
    return list;
}

Also, studentGrade is not array, it is an object (even though you are setting keys like an array):

var studentGrade = {};

My changes work, here is your updated fiddle: http://jsfiddle.net/LFhNQ/1/

edited Dec 13, 2013 at 6:30

answered Dec 13, 2013 at 6:15

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daniel Adriano Sipos Convery Over a year ago

When I use your jsfiddle it does work, but when I try to implement it in my own work, it is giving me a Uncaught TypeError: Cannot set property of "onclick" to null.

Rob M. Over a year ago

I had to remove your window.onload for it to work on jsfiddle, should've mentioned that

Daniel Adriano Sipos Convery Over a year ago

Welp, once I put the window.onload I got it to show in my text area, thanks a million.

Collectives™ on Stack Overflow

javascript array displaying undefined in text area

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related