顯示在文本區域中未定義的javascript數組

因此，我正在處理一些家庭作業，並且無法理解數組顯示爲未定義的原因。對不起，如果這很簡單，但我很新。我會盡力解釋我在這裏做什麼。顯示在文本區域中未定義的javascript數組

我有三個輸入字段，我收集學生的姓氏，名字和成績。我通過它們的id來獲取所有這些元素，並將所有這些輸入放到一個名爲studentGrade的數組中。然後我將該數組的內容推入另一個稱爲等級的數組中，然後將其作爲參數傳遞給名爲get_item_list的函數。從那裏我嘗試遍歷該參數的內容，以便我可以將其顯示到「分數」標識的文本字段。

我真的很感謝所有的投入，並希望我能夠了解我做錯了什麼。

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(); 
}

這是我與

<!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>

工作的JavaScript和有我所做的HTML，再次感謝。

來源

2013-12-13 Daniel Adriano Sipos Convery

你可以在jsfiddle中添加這個嗎？ – Abhidev

http://jsfiddle.net/LFhNQ/希望有所幫助。 –

我想你需要之前串聯值來初始化它list作爲一個字符串：

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; 
}

而且，studentGrade不是陣列，它是一個對象（即使你設置像一個數組的鍵）：

var studentGrade = {};

我的變化工作，這裏是你更新的提琴：http://jsfiddle.net/LFhNQ/1/

來源

2013-12-13 06:15:26

當我使用你的jsfiddle它確實有效，但是當我嘗試在我自己的工作中實現它時，它給了我一個Uncaught TypeError：無法將「onclick」屬性設置爲null。 –

我不得不刪除你的window.onload它在jsfiddle上工作，應該已經提到了這個， –

Welp，一旦我把window.onload我得到它顯示在我的文本區域，感謝一百萬。 –

顯示在文本區域中未定義的javascript數組

回答

相關問題