如何在不刷新页面的情况下更新输入值[关闭]

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、people 和 percent 放入函数 CalculatorForNumber。

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

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