Question

我无法弄清楚为什么会收到此错误：＆＃34;未捕获的TypeError：无法读取属性＆＃39; addEventListener＆＃39;未定义＆＃34;

以下是代码：

HTML

<form method="post" action="" id="security-check">
<input type="text" name ="first" placeholder="First Name">
<input type="text" name ="last" placeholder="Last Name">
<input type="number" name ="dob" placeholder="DOB">
<input type="text" name ="state" placeholder="State">
<input type="submit" value="submit">
</form>

JavaScript

var input = document.getElementsByTagName('input');
var fname = input[0];
var lname = input[1];
var dob = input[2];
var rez = input[3];

function idCheck(first, last, date, state){
  this.first    = "Teddy";
  this.last     = "Broosevelt";
  this.date     = 03041894;
  this.state    = "NY";

  if(firstName != this.first){return false;};
  if(lastName != this.last ){return false;};
  if(birthDate != this.date){return false;};
  if(rez != this.state){return false;};
}

input[4].addEventListener('submit', function(e){

  idCheck(fname, lname, dob, rez);
  e.preventDefault();

}, false);

Answer 1

Cannot read property addEventListener of undefined只是意味着您尝试使用某个对象的addEventListener方法无法正常工作，因为您正在尝试它的对象实际上并不是一个“未定义”的对象。

因此，input[4]是addEventListener之前的对象限定符，因此input[4]就是undefined。您必须检查代码以确定原因。正如其他人所说，你很可能没有将第5个元素返回到你的输入节点列表中。

修改

现在您已发布了更多代码，但存在许多问题。其中最大的一点就是你错误地连接了你的事件处理程序，所以它永远不会被调用。请参阅我对您的代码和评论的更新：

<html> <head> </head> <body>  <form method="post" action="#" id="securityCheck"> <input type="text" name="first" placeholder="First Name"> <input type="text" name="last" placeholder="Last Name"> <input type="number" name="dob" placeholder="DOB"> <input type="text" name="state" placeholder="State"> <input type="submit" value="submit"> </form> <script> // If you wish to work with form events, you need a reference to your form: var form = document.getElementById("securityCheck"); var input = document.getElementsByTagName('input'); var fname = input[0]; var lname = input[1]; var dob = input[2]; var rez = input[3]; function idCheck(first, last, date, state) { this.first = "Teddy"; this.last = "Broosevelt"; // This should be a date. You had it as a number and that // number could be interpreted as an octal because it starts with 0 this.date = new Date(1894, 2, 4); // Month is zero-based this.state = "NY"; // Where are firstName, lastName and birthDate being declared? if (fName != this.first) { return false; }; if (lName != this.last) { return false; }; if (dob != this.date) { return false; }; if (rez != this.state) { return false; }; } // You are attempting to wire up a submit button to the submit // event, but a submit button does not have this event, the form does form.addEventListener('submit', function (e) { // Calling idCheck may result in a return value of false // or it may result in nothing of consequence happening // Either way, you are not doing anything with what may // or may not come back from idCheck. All this function really // does is ensure that the form never submits idCheck(fname, lname, dob, rez); e.preventDefault(); }, false); </script> </body> </html>

为什么我得到＆＃34;未捕获的TypeError：无法读取属性＆＃39; addEventListener＆＃39;未定义＆＃34;

1 个答案: