javascript - Iterating over a nodelist, getting the length of a value of a node item

Question

I am trying to dynamically grab ZIPcodes and validate them when the length is 5.

I used querySelectorAll to grab the Zipcode fields on the page, as well as a few other fields I will use after validating.

I iterate over the nodelist and pass it to another function, where the eventlistener kicks off if the value is the correct length.

function GetZipCodeDetails() {

            var zipId = document.querySelectorAll("[id*='ZipCode']");
            var countyId = document.querySelectorAll("[id*='CountyId']");
            var stateId = document.querySelectorAll("[id*='StateId']");
            var phoneId = document.querySelectorAll("[id*='PhoneNumber']");

            for (var i = 0; i < zipId.length; i++) {
                if (zipId[i].length = 5)
                AssortedZipCodeFunctions(zipId[i], countyId[i], stateId[i], phoneId[i]);
            }
        }

        function AssortedZipCodeFunctions(zipId, countyId, stateId, phoneId) {
            //Runs auto-county/state function only when zipcode field is completed
            document.addEventListener("keyup", (e) => {
                if (zipId.value.length == 5) {
                    GetCountyAndStateFromIds(zipId, countyId, stateId, phoneId);
                } });
        }

The code works perfectly for me as it is listed above; I am just trying to move the second function into the first function, but I can't figure out how. I am just stuck on how come I can't do the following:

function GetZipCodeDetails() {

            var zipId = document.querySelectorAll("[id*='ZipCode']");
            var countyId = document.querySelectorAll("[id*='CountyId']");
            var stateId = document.querySelectorAll("[id*='StateId']");
            var phoneId = document.querySelectorAll("[id*='PhoneNumber']");

            for (var i = 0; i < zipId.length; i++) {
                document.addEventListener("keyup", (e) => {
                    if (zipId[i].value.length == 5) {
                        GetCountyAndStateFromIds(zipId[i], countyId[i], stateId[i], phoneId[i]);
                    }
                });
            }
        }

The above gives: "TypeError: Cannot read property 'value' of undefined at HTMLDocument."

I have figured out that the for loop is calling the second function, instead of waiting until the Zipcode value is 5... so all that happened is I passed it to another function? Or maybe I am stuck on how to get the length of the value of a node item? Please help.

Answer 1

In your event listener you are adding it to the document instead of each element separately

for (var i = 0; i < zipId.length; i++) {
                zipId[I].addEventListener("keyup", (e) => {
                    if (zipId[i].value.length == 5) {
                        GetCountyAndStateFromIds(zipId[i], countyId[i], stateId[i], phoneId[i]);
                    }
                });
            }