Невозможно переопределить внутреннюю переменную функции

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)
}

Первый - это получение данных из группы переключателей (их идентификаторы - «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>

Answer 2

Это вполне ожидаемо. Каждый раз, когда вы запускаете this.doTheMath(), вы делаете новый вызов функции и передаете только params.one или params.two. Таким образом, каждый раз, когда эта функция запускается, для нее задан только один из двух параметров, а для другого используется значение по умолчанию.

Функции не сохраняют значения из своих предыдущих вызовов. Каждый вызов функции выполняется независимо от заданных вами параметров.

У вас есть несколько вариантов, чтобы он работал.

1. Передайте оба параметра для каждого вызова (предпочтительно)

//Inside the first listener
this.doTheMath({
   first: e.target.getAttribute("for").split("_").pop(),
   second: document.querySelector('#license_amount').value
})

//Inside the second listener
this.doTheMath({
   first: document.querySelector('.radio_custom_label').getAttribute("for").split("_").pop(),
   second: parseInt(e.target.value)
})

Сохраните ваши значения вне функций

Answer 3

почему бы вам не установить условные значения для переменных один и два;

, например, var one = params.first || 13.

также попробуйте распечатать параметры на консоли, чтобы убедиться, что они отправлены. Надеюсь, это поможет, хотя