如何以編程方式將值設置為自動數字元素？

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