如何从HTML取输入经JS计算后返回结果至HTML（住宿时长示例）

Hey there! Let's get this date calculation feature working smoothly for you. I'll walk you through a complete, user-friendly solution that captures check-in/check-out dates from your HTML form, calculates the stay duration, and displays it—plus adds safeguards for common edge cases like missing dates or invalid date order.

HTML Structure #

First, let's adjust your existing HTML to include a clear trigger for the calculation (or we can make it auto-update, which I'll show later):

<form>
  <p>Select your Check-in date please</p>
  <input id="inDate" type="date">
  </br>
  <p>Select your Check-out date please</p>
  <input id="outDate" type="date">
  </br>
  <button type="button" onclick="calculateStay()">Calculate Stay Duration</button>
  </br>
  <span>You are staying</span>
  <span id="stay">0</span>
  <span> days with us.</span>
</form>

JavaScript Logic #

Here's the JavaScript function that handles dynamic input, date calculation, and error checking—replacing your hardcoded dates with user-selected values:

function calculateStay() {
  // Grab DOM elements we need
  const checkInEl = document.getElementById('inDate');
  const checkOutEl = document.getElementById('outDate');
  const resultEl = document.getElementById('stay');

  // Check if both dates are selected
  if (!checkInEl.value || !checkOutEl.value) {
    resultEl.textContent = 'Please select both check-in and check-out dates';
    return;
  }

  // Convert input strings to Date objects
  const checkInDate = new Date(checkInEl.value);
  const checkOutDate = new Date(checkOutEl.value);

  // Make sure check-out date is after check-in date
  if (checkOutDate <= checkInDate) {
    resultEl.textContent = 'Check-out date must be after check-in date';
    return;
  }

  // Calculate time difference in milliseconds
  const timeDifference = Math.abs(checkOutDate.getTime() - checkInDate.getTime());
  // Convert milliseconds to days (using floor for standard hotel logic: e.g., 7/13 → 7/15 = 2 days)
  const stayDays = Math.floor(timeDifference / (1000 * 3600 * 24));

  // Update the result on the page
  resultEl.textContent = stayDays;
}

Bonus: Auto-Update on Date Selection #

If you want the duration to update automatically when the user picks a date (no button click needed), add these event listeners right after the calculateStay function:

// Trigger calculation whenever a date is changed
document.getElementById('inDate').addEventListener('change', calculateStay);
document.getElementById('outDate').addEventListener('change', calculateStay);

Quick Notes: #

• Date Count Logic: Using Math.floor follows standard hotel practices—checking in on 7/13 and out on 7/15 counts as 2 days. If you want to count both the check-in and check-out days (making it 3 days), swap Math.floor with Math.ceil.
• User Feedback: The function checks for missing dates and reversed dates to keep users informed about invalid inputs.
• Real-Time Updates: The event listener bonus makes the experience more seamless for users.

内容的提问来源于stack exchange，提问作者Ari Cima