交换和操作两个表单输入值

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