I want to calculate days of a reservation for a booking website.
I want to calculate total price (days*$100) automatically without click any button to run function but update auto with out refresh page.
function daysBetween(startDate, endDate) {
var millisecondsPerDay = 1000 * 60 * 60 * 24;
var startDateUTC = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
var endDateUTC = Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
return Math.floor((endDateUTC - startDateUTC) / millisecondsPerDay);
}
document.getElementById("btn").addEventListener("click", function() {
let startDate = new Date(document.getElementById("startdate").value);
let endDate = new Date(document.getElementById("enddate").value);
let output = document.getElementById("totalprice");
// Get how much days is between these dates
let days = daysBetween(startDate, endDate);
if (days) {
output.classList.remove("text-danger");
output.innerHTML = `${days*100}€`;
} else {
/* if no valid date is entered */
output.classList.add("text-danger");
output.innerHTML = `Select valid dates`;
}
}, false);
<section class="sec5">Check in</section>
<section class="sec2"><input class="date" id="startdate" type="date" name="checkin" required=""></section>
<section class="sec5">Check out</section>
<section class="sec2"><input class="date" id="enddate" type="date" name="checkout" required=""></section>
<p>Total price
<p>
<section class="sec3" id="totalprice" name="totalprice">--</section>
<div id="btn">CLICK ME!</div>