Javascript 在脚本中添加单击事件侦听器无效

我试图在单击时将文本框中的颜色从蓝色更改为红色，但是，它始终为红色，事件侦听器由于某种原因无法工作

函数formFun（）{
var textBox1=document.forms[0]。元素[0]；
var textBox2=document.forms[0]。元素[1]；
var button1=document.forms[0]。元素[2]；
var button2=document.forms[0]。元素[3]；
textBox2.style.backgroundColor=“蓝色”；
按钮1.style.backgroundColor=“蓝色”；
按钮2.style.backgroundColor=“蓝色”；
按钮1.addEventListener（“单击”，changeColor（））；
函数changeColor（）{
textBox1.style.backgroundColor=“红色”；
}
}

点击1
点击2

调用

addEventListener

时，需要传递一个函数作为第二个参数。但是如果你仔细想想，你实际上是在传递函数调用的返回值。完全不同

---

按钮1.addEventListener（“单击”，更改颜色）

是正确的用法。您告诉事件侦听器在事件发生时调用哪个函数。它将为您调用事件处理程序。将您的函数视为您将传递到函数中的任何其他变量。

代码中有两个错误：

• 按钮1.addEventListener（“单击”，changeColor（））附加事件侦听器时不能直接调用函数。您需要附加功能
  changeColor

• 您需要在加载脚本时调用函数

  formFun

  ，以便事件绑定到dom元素

函数formFun（）{
var textBox1=document.forms[0]。元素[0]；
var textBox2=document.forms[0]。元素[1]；
var button1=document.forms[0]。元素[2]；
var button2=document.forms[0]。元素[3]；
textBox2.style.backgroundColor=“蓝色”；
按钮1.style.backgroundColor=“蓝色”；
按钮2.style.backgroundColor=“蓝色”；
按钮1.addEventListener（“单击”，更改颜色）；
函数更改颜色（e）{
控制台日志（“更改”）；
e、 预防默认值（）；
textBox1.style.backgroundColor=“红色”；
}
}
formFun（）

点击1
点击2
首先需要调用函数formFun（），并执行以下操作：

更正这行代码：
按钮1.addEventListener（“单击”，changeColor（））

到

按钮1.addEventListener（“单击”，更改颜色）

您在这里注册了一个侦听器，因此您只需要像changeColor那样指定函数名，而不是实际调用函数的changeColor（）

希望对你有所帮助
 如果您可以编写一个可运行的代码，如JSFIDLE等，那就太好了。