时间戳

首页 > 解决方案 > javascript中带有多个事件侦听器的for语句外的未定义变量

javascript - javascript中带有多个事件侦听器的for语句外的未定义变量

问题描述

我想使用 Javascript 验证 API 构建客户端验证。

我对某些字段进行了自定义验证，但希望在为空时对所有字段进行通用验证。我正在尝试使用 for 短语。但是由于某种原因，当我尝试在 for 之外运行变量 [i] 时出现此错误： Uncaught TypeError: Cannot read property 'value' of undefined

到目前为止，这是我的代码。

//Test
var test_field = document.querySelectorAll(".um-form-field");
var i;

  for (i = 0; i < test_field.length; i++) {
            
            test_field[i].addEventListener('keyup', test_function, false);
            test_field[i].addEventListener('click', test_function, false);
            test_field[i].addEventListener('invalid', test_function, false);
            
            console.log(test_field[i].value);//this works every time i click or type a field!


  function test_function (event) {
            console.log(test_field[i].value);//This tells me an undefined variable every time I click on a field

            }
  }

24/12 编辑： 感谢任何人。我终于使用了评论中提到的 event.target 。

这是我的最终代码（我在 setCustomValidity 方面遇到了一些问题）：

var all_fields = document.querySelectorAll(".um-form-field");
var i;
 for (i = 0; i < all_fields.length; i++) {
            
    all_fields[i].addEventListener('keyup', field_function, false);
    all_fields[i].addEventListener('click', field_function, false);
    all_fields[i].addEventListener('invalid', field_function, false);
            
  function field_function (event) {

    if (event.target.value.length == 0) {
            event.target.style.background = "#eb91ae";
            event.target.setCustomValidity("error");
            divError.style.display = "block";
            divError.innerHTML  = "You must complete this field"
            event.target.parentElement.appendChild(divError);
    } else {
            event.target.style.background = "#9deb91";
            event.target.setCustomValidity("");
            divError.style.display = "none";
    }
  }
 }

标签： javascriptfor-loopaddeventlistener

解决方案

您的代码将不起作用。在 iterable 之后for...loop，i将达到最终值，这i将等于test_field.length为什么test_function在执行时看起来像波纹管：

 function test_function (event) {
            console.log(test_field[test_field.length].value);

            }

因此，您可以像这样进行快速修复：

var test_field = document.querySelectorAll(".um-form-field");
test_field.forEach(field => {
    field.addEventListener('keyup', test_function, false);
    field.addEventListener('click', test_function, false);
    field.addEventListener('invalid', test_function, false);
});

function test_function (event) {
    console.log(event.target.value);
}

推荐阅读