title: Javascript loop scope and buttons
body: <p>So I would like to have a button dynamically created based on the element of an array but I run into errors when trying to pass arguments to the onclick function</p>
  
  <pre><code>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&lt;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);
  }
  </code></pre>
  
  <p>The AddGrade function is a simple alert that will push the value given</p>
  
  <pre><code>function AddGrade(toadd){
  var newgrade=prompt("Please enter a grade scaled up to 100 points","0 - 100");
  if (newgrade!=null){
    toadd.grades.push(newgrade);
    }
  }
  </code></pre>
  
  <p>The course and grading area "objects":</p>
  
  <pre><code>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
  }
  </code></pre>
  
  <p>I thought that wrapping the function in onClick would take care of the scope problem but I get an error in Addgrade saying it is trying to access a field of an undefined variable.  Thanks for the help</p>