обмен и манипулирование двумя входными значениями формы

Question

Я создал калькулятор, для выполнения которого требуется значение в месяцах или годах.Калькулятор работает с одним исключением: требуется, чтобы два поля ввода обновлялись в зависимости от значения друг друга.Вот пример поведения, которое я пытаюсь воссоздать:

https://www.bankrate.com/calculators/mortgages/loan-calculator.aspx

Я заранее извиняюсь, если следующий пример плохо читается, но здесь это так:

Еслипользователь вводит 72 «месяца», ввод «лет» разделит месяцы на 12 и отобразит результат.После небольшого инструктажа я обнаружил, что использование [a, b] = [b * 12, a / 12] приводит меня на полпути.Проблема, с которой я сталкиваюсь, состоит в том, что после ввода значений значение самого последнего обновленного ввода обновляется с использованием предыдущего значения (включая вычисление).Например, Пользователь вводит 60 месяцев> годы, заполняется значением 5> пользователь меняет месяцы на значение 72> года заполняется значением 6> месяцы автоматически заполняются значением 60 (годы остаются на значениииз 6)

Вот JS:

const loan = () => {
    let principal = document.getElementById('principal')
    let interestRate = document.getElementById('interestRate')
    let terms = document.getElementById('terms')
    let termsInYears = document.getElementById('termsInYears')
    let payment = document.getElementById('payment')
    let total = document.getElementById('total')
    let totalInterest = document.getElementById('totalInterest')
    let closingCosts = document.getElementById('closingCosts')
    let netAfterFees = document.getElementById('netAfterFees')
    let totalFeesAndInterest = document.getElementById('totalFeesAndInterest')
    let trueCost = document.getElementById('trueCost')

    let amount = parseFloat(principal.value)
    let interest = parseFloat(interestRate.value) / 100 / 12
    let payments = parseFloat(terms.value)
    let fees = parseFloat(closingCosts.value)

    if(!fees) {
        closingCosts.value = 0
    }

    [terms.value, termsInYears.value] = [termsInYears.value*12, terms.value/12]


    let x = Math.pow(1 + interest, payments)
    let monthly = (amount * x * interest) / (x-1)
    let totalPay = (monthly * payments)

    if (isFinite(monthly) && payment) {
        payment.innerHTML = monthly.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')
        netAfterFees.innerHTML = (amount - fees).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')
        total.innerHTML = (totalPay).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')
        totalInterest.innerHTML = ((monthly * payments) - amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')
        totalFeesAndInterest.innerHTML = (totalPay - amount + fees).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')
        trueCost.innerHTML = (((totalPay - amount + fees) / amount)*100).toFixed(2)
    } else {
        payment.innerHTML = '0'
        netAfterFees.innerHTML = '0'
        total.innerHTML = '0'
        totalInterest.innerHTML = '0'
        totalFeesAndInterest.innerHTML = '0'
        trueCost.innerHTML = '0'
    }
}

Я не могу говорить о качестве рабочего калькулятора, учитывая мой уровень опыта.Тем не менее, это работает.У меня просто чертовски много времени проходит этот [возможно глупый] обмен информацией.

Любая помощь будет принята с благодарностью!

Answer 1

Я решил эту проблему, используя querySelector, а затем добавил прослушиватель событий для каждого ввода:

    document.querySelector('#terms').addEventListener('input', (e) => {
        termsInYears.value = e.target.value / 12
    })

    document.querySelector('#termsInYears').addEventListener('input', (e) => {
        terms.value = e.target.value * 12
    })