javascript - JavaScript でオブジェクトを変更する動的ボタン

Question

したがって、別の div(D2) で宣言されたオブジェクトのフィールドから動的に入力される div(D1) があります。したがって、D1 のグレーディング エリア オブジェクトを変更するボタンを D1 に動的に作成することは可能ですか。
D2 のオブジェクト:

var grades = new Array("88", "91", "75", "96");
var area1 = new GradingArea("Homework", 30, grades);
var area2 = new GradingArea("Classwork", 40, grades);
var gradingareas = new Array(area1, area2);

var course1 = new Course("CS1500", gradingareas, 85);

D1 への入力は、maincourse で渡された引数が渡された関数によって行われ、基本的に成績の toString である for ループがあり、最後に D1 の HTML を次のように変更します。

    function bringforward(maincourse){
    for(var i = 0;i<maincourse.gradingareas.length; i++){
     txt = "Accumulatedgrades" +"<button onclick=AddGrade(maincourse.gradingareas[i]);>" + "Add Grade" + "</button>"
    }
document.getElementById("currentclassareas").innerHTML=txt; //current class areas is a paragraph tag
    }

累積成績は単なるプレースホルダーであり、別の場所で計算された文字列を表します

AddGrade はアラート ボックスを呼び出して、新しい値を入力し、プッシュで maincourse オブジェクトの配列に追加します。しかし、「maincourse.gradingareas [i]が定義されていません」と常に表示されます。これは、div内の記述されたステートメントでそれを保持していないと想定しているためです。addElement(button) を使用して AddGrade を関数だけでラップしようとしましたが、どちらも成功しませんでした。任意の提案をいただければ幸いです