How can I update input value without refreshing the page

OK, so I am trying to create a simple tip calculator but it doesn't work unless the user enters the value and then refresh the page. How can I fix this so that when a number inputted it calculates when a button is pressed without refreshing the page.

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

})

https://stackoverflow.com/questions/66557584/how-can-i-update-input-value-without-refreshing-the-page March 10, 2021 at 10:39AM