Javascript循环范围和按钮

因此，我希望根据数组的元素动态创建一个按钮，但在尝试将参数传递给onclick函数时遇到错误

function bringforward(maincourse){
  var newdiv = document.createElement('div');
  newdiv.id="Current class" 
  newdiv.style="background-color:#207420;height:440px;width:440px";

for(var i = 0;i<maincourse.gradingareas.length; i++){

 var gradeplace = document.createElement('p');
 gradeplace.id = grades;
 newdiv.appendChild(gradeplace);

 var button = document.createElement('button');
 button.innerHTML = 'Add Grade';
 button.onclick = function myfunc(){AddGrade(maincourse.gradingareas[i])};
 gradeplace.appendChild(button);
}

球场和放坡区域“对象”：

---

我原以为在onClick中包装函数可以解决范围问题，但我在Addgrade中得到一个错误，说它试图访问一个未定义变量的字段。感谢您的帮助

关于stackoverflow的问题以多种形式提出，问题是

i

是一个参考，因此当您单击它时，它将等于

maincourse.gradingareas.length

是否有方法取消引用，因为我在

maincourse.gradingareas[i]的相同循环中使用它.name

那么为什么它的工作方式不同呢？

function AddGrade(toadd){
var newgrade=prompt("Please enter a grade scaled up to 100 points","0 - 100");
if (newgrade!=null){
  toadd.grades.push(newgrade);
  }
}

function Course(name, gradingareas, finalgrade) {
    this.name = name;
    this.gradingareas = gradingareas;  //array of gradingareas
    this.finalgrade = finalgrade;
}
function GradingArea(name, weight, grades){
    this.name = name;
    this.weight = weight;
    this.grades = grades;  //array of grades
}