Today, I try to write a web page that can receive users' data and display it to the user. Therefore, I use an array to store data and for loop to read data. When I run the code, there is an error in line16(Uncaught TypeError: Cannot read property 'length' of undefined). I guess that I use the for-loop in the wrong way. If someone can figure out, Please notice me. Thanks！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var students = [["2019001","like",89,92,91],["2019002","zhnagsan",67,89,77]];
function load_data()
{
var table_result;
table_result = "<table border=1>";
table_result += "<tr><th>student number</th><th>student name</th><th>score1</th><th>score2</th><th>score3</th></tr>";
for (var i = 0; i < students.length; i++)
{
table_result += "<tr>";
for (var j = 0; j < students[i].length; j++)
{
table_result += "<td>"+students[i][j]+"</td>"
}
table_result += "</tr>";
}
table_result += "</table>";
document.getElementById('result').innerHTML = table_result;
}
function add_new()
{
var studentName, studentNumber, score1, score2, score3;
studentName = document.getElementById("studentName").value;
studentNumber = document.getElementById("studentNumber").value;
score1 = document.getElementById("score1").value;
score2 = document.getElementById("score2").value;
score3 = document.getElementById("score3").value;
var addition;
additon = new Array(studentNumber,studentName,score1,score2,score3);
students.push(addition);
load_data();
}
</script>
</head>
<body onload="load_data()">
<div id="result">
</div>
<form>
student name: <input type="text" id="studentName"><br>
student number: <input type="text" id="studentNumber"><br>
score1: <input type="text" id="score1"><br>
score2: <input type="text" id="score2"><br>
score3: <input type="text" id="score3"><br>
<input type="button" id="button" onclick="add_new()" value="add"><br>
</form>
</body>
</html>