遍历节点列表，获取节点项值的长度

Question

我试图动态抓取邮政编码并在长度为5时验证它们。

我使用querySelectorAll来获取页面上的Zipcode字段，以及验证后将使用的其他一些字段。

我遍历节点列表并将其传递给另一个函数，如果值是正确的长度，则eventlistener将启动。

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

上面列出的代码对我来说是完美的;我只是想把第二个函数移到第一个函数中，但我不知道怎么做。我只是不知道为什么我不能做以下事情:

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]);
}
});
}
}

上面给出:"TypeError: Cannot read property 'value' of undefined在HTMLDocument !">

我已经发现for循环正在调用第二个函数，而不是等到Zipcode值为5…所以我所做的就是把它传递给另一个函数?或者我可能被困在如何获得节点项的值的长度?请帮助。

Answer 1

在您的事件侦听器中，您要将它添加到文档中，而不是单独将每个元素添加到文档中

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]);
}
});
}