如何在不單擊任何按鈕運行功能的情況下自動計算

我想計算預訂網站的預訂天數。我想自動計算總價格（天* 100 美元），而不需要單擊任何按鈕來運行功能，但在不重繪 頁面的情況下自動更新。

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>

uj5u.com熱心網友回復：

可能的解決方案使用change事件到最后input（結帳輸入`，因此當用戶提交元素的值時將觸發該函式。

當用戶提交對元素值的更改時<input> <select>，會為 和<textarea>元素觸發 change 事件。與輸入事件不同，更改事件不一定會在每次更改元素值時觸發。

另外，我添加了一個 if 陳述句，以使該函式僅在兩者input都有值時才執行。

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>

uj5u.com熱心網友回復：

使用change事件，但以這種方式應用于兩個輸入：

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>

uj5u.com熱心網友回復：

只需添加：

onchange="daysBetween()"

在你的情況下：

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

標籤：

上一篇：如何將linearGradient應用于尊重gradientUnits="userSpaceOnUse"的SVG<use>元素？

下一篇：按順序從陣列中洗掉專案，直到找到匹配的專案