javascript - 如何在不刷新页面的情况下更新输入值

Question

好的，所以我正在尝试创建一个简单的提示计算器，但除非用户输入值然后刷新页面，否则它不起作用。我该如何解决这个问题，以便在输入数字时计算按下按钮而不刷新页面的时间。

document.addEventListener('DOMContentLoaded', function () {
document.getElementById('calculate').onclick = CalculatorForNumber
const billing = document.querySelector('#bill').value
const people = document.querySelector('#numberofpeople').value
const percent = document.querySelector('#percent').value
function CalculatorForNumber() {
    if (document.getElementById('type').value === document.getElementById('bynumberofpeople')){
        alert((billing/100)*people)
    } else{
        alert((billing/100)*percent)
    }

}

})

Answer 1

您应该将 3 个变量和billing放入函数 CalculatorForNumber。peoplepercent

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('calculate').onclick = CalculatorForNumber

  function CalculatorForNumber() {
    const billing = document.querySelector('#bill').value
    const people = document.querySelector('#numberofpeople').value
    const percent = document.querySelector('#percent').value

    if (document.getElementById('type').value === document.getElementById('bynumberofpeople')){
        alert((billing/100)*people)
    } else{
        alert((billing/100)*percent)
    }
  }
})

这样，每次单击计算按钮时，都会检索新数据进行计算