JavaScript新手求助：绑定change事件后函数无法正常执行

嗨，我来帮你定位问题啦！你猜对了，问题确实出在第二行的事件绑定代码上，咱们一步步说清楚：

问题根源：事件绑定传参方式错了 #

当你写input1.addEventListener("change", updateValue(input1));的时候，你是直接执行了updateValue(input1)这个函数，然后把它的返回值（这里是undefined，因为你的函数没有return语句）传给了addEventListener。而addEventListener需要的是一个函数引用——也就是告诉它“当事件触发时，你去调用这个函数”，而不是“现在就把这个函数执行了，把结果给我”。

所以页面加载的时候，updateValue会被执行一次，但当你修改输入框内容触发change事件时，根本没有对应的回调函数去响应，这就是为什么你看不到效果，也没报错的原因。

两种修复方案 #

方案1：用匿名函数包裹调用

把第二行代码改成这样：

input1.addEventListener("change", function() {
  updateValue(input1);
});

这样我们传给addEventListener的是一个匿名函数，当change事件触发时，这个匿名函数才会执行，进而调用updateValue(input1)，完美解决了“提前执行”的问题。

方案2：利用事件对象获取目标元素（更优雅）

这种方式不需要提前传入元素，而是通过事件本身的target属性拿到触发事件的输入框，复用性更强，适合以后扩展多个输入框的场景：

1. 先修改事件绑定：

input1.addEventListener("change", updateValue);

2. 然后修改updateValue函数，接收事件对象：

function updateValue(event) {
  const field = event.target; // 从事件对象里拿到触发事件的输入框
  var InputOrgColor = field.style.backgroundColor;

  const apiUrl = 'https://hook.eu1.make.com/wr3p7mnuqokj9...wns2n?voucher-id=' + field.value;

  if (field.value === ``) {
    field.style.backgroundColor = InputOrgColor;
    document.getElementById("submit").style.visibility = `visible`;
  } else { // 这里建议加上大括号，增强可读性
    fetch(apiUrl)
      .then(response => {
        if (response.status === 200) {
          field.style.backgroundColor = `#99ffcc`;
          document.getElementById("submit").style.visibility = `visible`;
        } else if (response.status === 201) {
          field.style.backgroundColor = `#ffcccb`;
          document.getElementById("submit").style.visibility = `hidden`;
          alert("Der Gutscheincode wurde nicht gefunden. Bitte überprüfe Deine Eingabe.");
        } else if (response.status === 202) {
          field.style.backgroundColor = `#ffcccb`;
          document.getElementById("submit").style.visibility = `hidden`;
          alert("Der Gutscheincode wurde zwar gefunden, aber der Gutschein ist entweder unbezahlt oder bereits abgesprungen.");
        }
      })
  }
};

额外小建议 #

原代码里else后面的fetch语句没有加大括号，虽然语法上没问题，但代码可读性会变差，建议像上面那样加上大括号，养成良好的编码习惯哦～

备注：内容来源于stack exchange，提问作者Ralf Becker