Javascript Typescript中的测验触发事件无法正常工作

我对我的代码有几个问题，因为我不知道为什么它不能正常工作。 首先，如果我单击其中一个按钮，甚至单击显示问题的文本区域，它将触发所有按钮并移动到下一个问题，而无需单击下一个问题按钮。 接下来，如果单击所有问题，并且我的计数器变量hs的值与我的问题长度的值相同，则会得到未定义的错误变量计数器。 我的最后一个问题是，如果我点击按钮将其与我的问题数组中的id进行比较，我能得到一个数字id吗

课堂测验{
公共问题=[{question}，{answers[4]}，{id:number}//伪代码
public qst=document.querySelector（“.message content”）；
公共答案=document.querySelector（“答案”）；
public aButtons=document.getElementById（“BTN”）；
public nextQ=document.getElementById（“nextQuestion”）；
公共计数器：编号=0；
构造函数（）{
addEventListener（“单击”，此按钮Listener）；
}
公共按钮列表器=（e）=>{
让quest=this.qst.textContent=this.questions[this.counter].question；
设a=（this.aButtons.getElementsByClassName（“btn”）[0]）。innerHTML=this.questions[this.counter]。答案[0]；
设b=（this.aButtons.getElementsByClassName（“btn”）[1]）。innerHTML=this.questions[this.counter]。答案[1]；
设c=（this.aButtons.getElementsByCassName（“btn”）[2]）。innerHTML=this.questions[this.counter]。答案[2]；
设d=（this.aButtons.getElementsByClassName（“btn”）[3]）。innerHTML=this.questions[this.counter]。答案[3]；
console.log（e.target.id+“”+e.currentTarget）；
如果（e.target.id=“nextQuestion”）{
这是一个计数器+=1
}else if（this.counter>=this.questions.length）{
这个计数器=0；
}
}    
}
新测验（）；

我的测验


问题领域



按钮111111
按钮211111
按钮311111
按钮22224



正确/错误答案
下一个问题

在构造函数中：

addEventListener("click", this.buttonListener);

…不起作用，因为

addEventListener

是DOM元素的一种方法，您只是直接调用它。但假设您更改为类似以下内容：

document.querySelector('#nextQuestion').addEventListener("click", this.buttonListener);

…这仍然不起作用。原因在于JavaScript调用函数的方式。函数引用

this.buttonListener

在调用时不会自动调用，因为

this

设置为

测验

实例。因此，当在该函数中计算此表达式时

this.counter

…

此。计数器将未定义。您可以使用以下方法解决此问题：

这将使得无论如何调用
This.buttonListener
，
This
都将被设置为您的
quick
实例。
TL；DR您确实需要包含一个更抽象的代码版本。@ternaldark这只是一个方法和相关变量。我编辑了问题数组。。html部分也是abstr行动
document
  .querySelector('#nextQuestion')
  .addEventListener("click", this.buttonListener.bind(this);