如何以编程方式将值设置为自动数字元素？

Question

我将 (autonumeric@4.1.0) 与 laravel 5.7/jquery 3.4.1 应用程序一起使用，我需要在事件触发时以编程方式将值设置为自动数字元素。 查看描述https://github.com/autoNumeric/autoNumeric

我看到了 set 方法的例子：

anElement.set(42.76);

我有这个问题，就像我在刀片文件中附加的 public/js/Backend/bookings-and-availability.js 一样，我有：

function bookingsAndAvailability(page, paramsArray) { // constructor of backend bookingsAndAvailability listing - set all from referring page and from server
  // elements init
  ...
  new AutoNumeric('#numeric_check_fees', {
    currencySymbolPlacement: this_current_currency_position,
    currencySymbol: this_current_currency_short,
    maximumValue: '9999999999.99',
    minimumValue: 0.00
  });
  const check_feesAutoNumeric = document.querySelector('#numeric_check_fees');
  check_feesAutoNumeric.addEventListener('autoNumeric:rawValueModified', e => {
    if (typeof e.detail.newRawValue != "undefined") {
      $("#check_fees").val(e.detail.newRawValue)
    }
  });
  ...

// event handling:
bookingsAndAvailability.prototype.feeDictionaryItemSelect = function(selected_value) {

  // anElement.set(42.76);
  check_feesAutoNumeric = document.querySelector('#numeric_check_fees');
  check_feesAutoNumeric.set(selected_value)
}

但我得到了错误：

bookings-and-availability.js?dt=1592282828:1708 Uncaught TypeError: check_feesAutoNumeric.set is not a function
        at bookingsAndAvailability.feeDictionaryItemSelect (bookings-and-availability.js?dt=1592282828:1708)
        at HTMLSelectElement.onchange (bookings-and-availability:991)

哪个是有效的方式？

修改：在将值设置为再次初始化数字元素后，我发现了一个可能的决定，例如：

$("#numeric_check_fees").val(selected_value)
new AutoNumeric('#numeric_check_fees', {
    currencySymbolPlacement: this_current_currency_position,
    currencySymbol: this_current_currency_short,
    maximumValue: '9999999999.99',
    minimumValue: 0.00
});

const check_feesAutoNumeric = document.querySelector('#numeric_check_fees');
check_feesAutoNumeric.addEventListener('autoNumeric:rawValueModified', e => {
    if (typeof e.detail.newRawValue != "undefined") {
        $("#check_fees").val(e.detail.newRawValue)
    }
});

它有效，但我收到警告数字元素已被初始化。 有更好的决定吗？

谢谢！

Answer 1

您会收到Uncaught TypeError: check_feesAutoNumeric.set is not a function错误，因为check_feesAutoNumeric不是 AutoNumeric object，而是您调用document.querySelector('#numeric_check_fees')返回的简单 DOM 元素。

能够使用.set(42.76)的最佳方法是在初始化期间保留对您 AutoNumeric object 的引用，例如这样做：

const anElement = new AutoNumeric('#numeric_check_fees', {
    currencySymbolPlacement: this_current_currency_position,
    currencySymbol: this_current_currency_short,
    maximumValue: '9999999999.99',
    minimumValue: 0.00
});

...然后在需要更改元素值时使用该引用：

anElement.set(42.76);