title: onkeyup event on dynamic array
body: <p>Good Evening,</p>
  
  <p>I am having trouble setting up the <code>onkeyup</code> event. I am trying to get it to fire an objects method when a user enters text into the text field. It does not seem to find the object.
  I have cut down on the code and have made the following sample:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
  
          var ReportModule = new function () {
  
              function ReportObj(id, title) {
  
                  this.id = id;
                  this.title = title;
                  this.result = "";
                  this.empno = "";
  
                  this.UpdateEmpno = function (empNo, resultBoxID) {
                      this.empno = empNo;
                      $(resultBoxID).update("Result: " + empNo);
                  };
              };
  
              var ReportObjArray = new Array();
  
              var test1 = new ReportObj("box1", "First object");
              var test2 = new ReportObj("box2", "Second object");
  
              ReportObjArray.push(test1);
              ReportObjArray.push(test2);
  
  
              this.Initialize = function () {
                  for (i = 0; i &lt; ReportObjArray.length; i++) {
  
                      var container = document.createElement("div");
                      container.id = ReportObjArray[i].id;
                      container.textContent = ReportObjArray[i].title;
                      $('#Container').append(container);
  
                      var empnoInput = document.createElement("input");
                      empnoInput.type = "text";
                      empnoInput.id = ReportObjArray[i].id + "_Empno";
  
                      empnoInput.onkeyup = function (event) {
                          // Update Report Objects empno field
                          ReportObjArray[i].UpdateEmpno(empnoInput.value,empnoInput.id);    // &lt;-------- Undefined here
                      };
  
                      $('#' + ReportObjArray[i].id).append(empnoInput);
  
                      var container2 = document.createElement("div");
                      container2.id = ReportObjArray[i].id + "_result";
                      container2.style.border = "1px solid black";
                      container2.style.width = "100px";
                      container2.textContent = "Result:";
                      $('#' + container.id).append(container2);
                  };
              };
          }
      &lt;/script&gt;
  
          &lt;/head&gt;
  &lt;body onload="ReportModule.Initialize()"&gt;
      &lt;div id="Container"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Update</strong>: It works when searching for the object in the <code>ReportObjArray</code> and matching the correct object. However, I was wondering if there was a more efficient way instead of having to look through the array each time.</p>
  
  <pre><code>            empnoInput.onkeyup = function (event) {
                  // Update Report Objects empno field
                  var target_id = document.getElementById(event.target.id).id;
                  for (j = 0; j &lt; ReportObjArray.length; j++) {
                      if (target_id = ReportObjArray[j].id) {
                          ReportObjArray[j].UpdateEmpno(document.getElementById(event.target.id).value,empnoInput.id);
                          break;
                      }
                  }
              };
  </code></pre>