How can calculate automatically without click any button to run function

Question

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">CALCULATE</div>

You could perhaps perform the operation on the change event for the date inputs instead of the click event for the button. — David
– David, Commented Jan 12, 2022 at 14:02

James · Accepted Answer · 2022-01-12 14:11:27Z

1

Possible solution use change event to the last input (checkout input` so the function will be triggered when an element's value is committed by the user.

The change event is fired for <input> <select>, and <textarea> elements when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.

Also, I add an if statement to make the function only executed when both input have value.

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("enddate").addEventListener("change",function(){
//Check if the value is existed
if(document.getElementById("startdate").value)
check()
});
document.getElementById("startdate").addEventListener("change",function(){
//Check if the value is existed
if(document.getElementById("enddate").value)
check()
});

function check() {
  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`;
  }
}

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

edited Jan 12, 2022 at 14:11

answered Jan 12, 2022 at 14:04

James

2,7872 gold badges9 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Over a year ago

@MONSK, I updated the code so only when the two input value is existed, it will check. Does adding this helps? if not, I could remove it

Stal Over a year ago

It's perfect! Thank you again

Krupson · Accepted Answer · 2022-01-12 14:11:38Z

Use change event but apply to both inputs this way:

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

function recalculatePrice() {
  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`;
  }
};

document.querySelector("#startdate").addEventListener("change", recalculatePrice, false);
document.querySelector("#enddate").addEventListener("change",recalculatePrice , 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>

DevChris · Accepted Answer · 2022-01-12 14:03:39Z

0

Just add:

onchange="daysBetween()"

In your case:

<section class="sec5">Check in</section>
<section class="sec2"><input class="date" onchange="daysBetween()" id="startdate" type="date" name="checkin" required=""></section>
<section class="sec5">Check out</section>
<section class="sec2"><input class="date" onchange="daysBetween()" id="enddate" type="date" name="checkout" required=""></section>
<p>Total price</p>
<section class="sec3" id="totalprice" name="totalprice">--</section>

answered Jan 12, 2022 at 14:03

DevChris

1691 gold badge1 silver badge11 bronze badges

Collectives™ on Stack Overflow

How can calculate automatically without click any button to run function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related