javascript - 无法覆盖函数的内部变量

Question

只有我和我的菜鸟再次提问。尝试从函数内的事件监听器传递变量并计算它们的乘积(现在只是记录它们)。它看起来像这样:

getFactors(){
    document.addEventListener("click", e => {
        if(e.target.className === "radio_custom_label"){
            e.stopPropagation()
            this.doTheMath({first: e.target.getAttribute("for").split("_").pop()})
        }
    })
    document.addEventListener("change", e => {
        if(e.target.id === "license_amount"){
            this.doTheMath({second: parseInt(e.target.value)})
        }
    })
}

doTheMath(params){
    var one = 13;
    var two = 1;
    one = (params.first !== undefined)?params.first:one
    two = (params.second !== undefined)?params.second:two

    console.log(one,two)
}

第一个是从单选按钮组获取输入(它们的 ID 为“radio_”13、22 和 34)，第二个是选择选项下拉列表 - 一个从 1 到 10 的数组。传递一个对象，因为变量位于单独的监听器，不想为缺少的参数声明 null。

• 我的期望:

  • 默认值是 13 和 1。我选择了第二个单选按钮，现在值是 22 和 1。
  • 我从下拉列表中选择选项 5，现在是 22 和 5。
  • 我从第二个单选按钮切换到第一个，我有 13 和 5。

• 我得到了什么:

  • 默认为 13 和 1，我选择 radio-2，这使得变量分别为 22 和 1。
  • 选择选项 4，我期望是 22 和 4。结果是 13 和 4。
  • 更改为广播 3。 34和4？不，34 和 1。

为什么它们没有被传入的参数覆盖？尝试了常规条件，结果相同。非常感谢您抽出宝贵的时间，即使这只是微不足道的事情。

Answer 1

doTheMath 中没有任何内容是持久的；它的一次调用不会为下一次调用“保存”变量。

考虑监听器(可以简化为一个)调用一个检索两个值的函数，然后使用两个值调用 doTheMath:

attachListeners() {
  document.addEventListener("change", e => {
    if (e.target.matches('#license_amount, .radio')) {
      e.stopPropagation();
      getValues();
    }
  })
}
getValues() {
  const radioValue = document.querySelector('.radio:checked')?.value ?? 13;
  const selectValue = document.querySelector('#license_amount').value || 1;
  this.doTheMath({
    radioValue,
    selectValue
  });
}
doTheMath({ radioValue, selectValue }) {
  console.log(radioValue, selectValue);
}

单选按钮更改将触发您可以监听的 change 事件，因此它适用于单选按钮和选择。

调整.matches调用，以便它正确选择单选按钮(例如，如果单选按钮有一个radio类，请使用上面代码中的选择器) .

class X {
  attachListeners() {
    document.addEventListener("change", e => {
      if (e.target.matches('#license_amount, .radio')) {
        e.stopPropagation();
        this.getValues();
      }
    })
  }
  getValues() {
    const radioValue = document.querySelector('.radio:checked')?.value ?? -1;
    const selectValue = document.querySelector('#license_amount').value || 77;
    this.doTheMath({
      radioValue,
      selectValue
    });
  }
  doTheMath({ radioValue, selectValue }) {
    console.log(radioValue, selectValue);
  }
}
const x = new X();
x.attachListeners();

<input type="radio" class="radio" name="foo" value="1">
<input type="radio" class="radio" name="foo" value="2">
<input type="radio" class="radio" name="foo" value="3">

<select id="license_amount">
  <option></option>
  <option value="55">55</option>
  <option value="66">66</option>
</select>