求助：实现JavaScript双向输入联动功能（类似Zillow房贷计算器）

No problem at all—let's get that two-way sync working smoothly. The main trick is handling input events for both fields without triggering an infinite loop (since updating one would normally fire the other's event). Here's a clean, robust implementation tailored for your Zillow-style calculator:

Step 1: HTML Structure #

First, set up your input fields (I’ll include a home price field since that’s the base for all calculations):

<div class="calculator-group">
  <label for="homePrice">Home Price</label>
  <input type="number" id="homePrice" placeholder="$0" value="500000" min="0">

  <label for="downPaymentPercent">Down Payment (%)</label>
  <input type="number" id="downPaymentPercent" placeholder="0%" value="20" min="0" max="100">

  <label for="downPaymentAmount">Down Payment Amount</label>
  <input type="number" id="downPaymentAmount" placeholder="$0" value="100000" min="0">
</div>

Step 2: JavaScript Logic #

Add this script to handle the two-way sync, with safeguards against infinite loops and input validation:

// Grab DOM elements
const homePriceInput = document.getElementById('homePrice');
const downPercentInput = document.getElementById('downPaymentPercent');
const downAmountInput = document.getElementById('downPaymentAmount');

// Flag to block infinite event loops
let isUpdating = false;

// Update down payment amount when percent changes
downPercentInput.addEventListener('input', () => {
  if (isUpdating) return;
  isUpdating = true;

  const homePrice = parseFloat(homePriceInput.value) || 0;
  let downPercent = parseFloat(downPercentInput.value) || 0;
  
  // Keep percent within valid 0-100 range
  downPercent = Math.max(0, Math.min(100, downPercent));
  downPercentInput.value = downPercent;

  // Calculate and set amount with currency-friendly precision
  const downAmount = homePrice * (downPercent / 100);
  downAmountInput.value = downAmount.toFixed(2);

  isUpdating = false;
});

// Update down payment percent when amount changes
downAmountInput.addEventListener('input', () => {
  if (isUpdating) return;
  isUpdating = true;

  const homePrice = parseFloat(homePriceInput.value) || 0;
  let downAmount = parseFloat(downAmountInput.value) || 0;
  
  // Keep amount within valid 0-to-home-price range
  downAmount = Math.max(0, Math.min(homePrice, downAmount));
  downAmountInput.value = downAmount.toFixed(2);

  // Calculate percent (avoid division by zero if home price is 0)
  const downPercent = homePrice > 0 ? (downAmount / homePrice) * 100 : 0;
  downPercentInput.value = downPercent.toFixed(2);

  isUpdating = false;
});

// Optional: Sync both fields if home price changes
homePriceInput.addEventListener('input', () => {
  downPercentInput.dispatchEvent(new Event('input'));
});

Key Details Explained #

• Infinite Loop Prevention: The isUpdating flag ensures that when we programmatically update one field, it doesn’t trigger the other’s input event (which would cause an endless cycle).
• Input Validation: We clamp values to realistic ranges and handle empty/non-numeric inputs gracefully with parseFloat(...) || 0.
• Precision: toFixed(2) keeps numbers formatted like currency, which matches user expectations for a mortgage tool.
• Home Price Sync: The optional listener for the home price field ensures both down payment fields update automatically if the user adjusts the property price.

Just drop this into your project, tweak IDs/classes to match your existing markup, and you’ll have smooth two-way binding just like Zillow’s calculator.

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