Как программно установить значение для автономного элемента?

Question

Я использую (autonumeric@4.1.0) с приложением laravel 5.7/jquery 3.4.1, и мне нужно программно установить значение для автономного элемента при срабатывании события. Глядя на описание https://github.com/autoNumeric/autoNumeric

Я вижу пример с методом набора:

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, а простой элемент DOM, возвращаемый вашим вызовомdocument.querySelector('#numeric_check_fees').

Лучший способ использовать.set(42.76), будет сохранять ссылку на ваш объект AutoNumeric во время инициализации, например, делая это:

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