onkeyup event on dynamic array

StackOverflow https://stackoverflow.com/questions/23555805

Question

Good Evening,

I am having trouble setting up the onkeyup 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:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>

        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 < 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);    // <-------- 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);
                };
            };
        }
    </script>

        </head>
<body onload="ReportModule.Initialize()">
    <div id="Container"></div>
</body>
</html>

Update: It works when searching for the object in the ReportObjArray 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.

            empnoInput.onkeyup = function (event) {
                // Update Report Objects empno field
                var target_id = document.getElementById(event.target.id).id;
                for (j = 0; j < ReportObjArray.length; j++) {
                    if (target_id = ReportObjArray[j].id) {
                        ReportObjArray[j].UpdateEmpno(document.getElementById(event.target.id).value,empnoInput.id);
                        break;
                    }
                }
            };
Was it helpful?

Solution

Wrap your for loop code in a closure:

for (i = 0; i < ReportObjArray.length; i++) {
    (function(i) {
        // code
    })(i);
}

Working JS Fiddle:

http://jsfiddle.net/23vkS/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top