Question

关于如何将事件监听器的id传递给函数的解决方案很多答案，使用纯javascript ，包括使用 THIS “函数”

请参见 Pass element ID to Javascript function

我想将其包含在我的代码中，但是不幸的是，对于我来说，它似乎不起作用。

某些上下文 ：在我的页面上；有4个选项，只有1个选项始终是正确的，而其中一个是更改的。这里的代码需要删除以前的事件侦听器（如果单击了答案是正确的），然后依次分配另一个事件侦听器不要找出错误的计数器，因为正确的选项有更改位置以及div ID

相关代码：

function AvAnswers(){
//changing the options



for(i = 0; i<4; i){
  rngIndex[i] = Math.floor(Math.random() * 4);
  else{
    document.getElementById(i).innerHTML = ABCD[i] + AnswerArray[rngIndex[i]];
    if (rngIndex[i] == 3) {
      document.getElementById(i).addEventListener("click", Correct(this.id) );
    }
    else{
      document.getElementById(i).addEventListener("click", Incorrect(this.id) );
    }
    i++;
  }
}             //end of a for loop
}             //end of a function

function Correct(id){
  alert('good nice');
  document.getElementById(id).removeEventListener("click", Correct(this.id));
  AvAnswers();//reset options
}
function Incorrect(id){
  incorrect++
  alert(incorrect + " incorrect")
  document.getElementById(id).removeEventListener("click", Incorrect(this.id));
}

，这是我得到的错误消息。

错误消息： 未捕获的TypeError：无法读取null的属性'removeEventListener'

问题： 与变量或语法的范围有关？老实说，不知道。可单击添加事件侦听器的div。（所以确实存在。）

任何帮助将不胜感激。

Answer 1

事件侦听器必须是一个函数，所以您需要做的是使函数返回匿名函数，如下所示：

function Correct(id){
  return function() {
    alert('good nice');
    document.getElementById(id).removeEventListener("click", this);
    doFunction();//reset options
  }
}

当事件触发时，这将使id在范围内，但是内部函数实际上是被调用的。另外，您要删除的事件侦听器就是您内在的事件侦听器，因此this应该适用。

另外，您对this.id的引用仅限于函数AvAnswers，这对您的目的没有好处，因为我认为您实际上是在寻找当前的元素ID。您的代码是不完整的，但是基于上下文，我认为如果变量如示例所示可以使循环中的元素有效，则最好使用变量i。

Answer 2

您必须将函数引用传递给addEventListener和removeEventListener，而不是函数 call 。

截至目前，您正在传递Correct(this.id)和Incorrect(this.id)的返回值，这两个值都没有明确的return值，这意味着他们返回undefined。

所以基本上，您正在这样做：

document.getElementById(i).addEventListener("click", undefined);

话虽如此，这也会导致您显示的错误消息：

document.getElementById(i).addEventListener("click", Correct(this.id));

该行立即调用函数Correct()并传递this.id作为参数。在函数中，您接受参数id并在此处使用它：

document.getElementById(id).removeEventListener("click", Correct(this.id));

您得到的错误意味着document.getElementById(id)找不到元素，这就是为什么它返回null的原因。这意味着您的函数调用中的this.id不是您期望的（我假设它是undefined），这反过来意味着this不是您期望的是什么。

Answer 3

您的代码正在立即调用Correct(this.id)和Incorrect(this.id)（它不等待click事件。要配置事件监听器，您必须有一个函数引用。您要从中传递返回值调用Correct或Incorrect的调用，但这些函数均未返回值，因此未分配click处理程序。

此外，事件监听器收到的第一个参数始终是对事件本身的引用。

要解决此问题，您可以将调用包装在匿名函数中，并将event引用传递给实际的处理程序。

对于收到的错误消息，您得到此消息是因为this中的AvAnswers没有引用DOM元素，因此this.id不是有效的{{1} }的任何DOM元素。您应该添加id来找出实际上是在拾取的东西。

您将不得不重新评估console.log(this.id)的调用方式，并更改该调用上下文，以便AvAnswers拥有适当的引用，或者找到捕获正确的this的替代方法。

id

将ID从事件监听器传递给函数

3 个答案: