新手求助：如何用JavaScript限制折扣不超过售价的50%？

1. HTML结构示例 #

先搭建两个输入字段的基础结构：

<input type="number" id="sale_price" placeholder="售价">
<input type="number" id="discount" placeholder="折扣">

2. JavaScript核心逻辑 #

通过监听输入事件，实时限制并修正折扣值：

// 获取输入元素
const salePriceInput = document.getElementById('sale_price');
const discountInput = document.getElementById('discount');

// 计算最大允许折扣的函数
function getMaxDiscount() {
  const salePrice = parseFloat(salePriceInput.value) || 0;
  return salePrice * 0.5;
}

// 售价变化时，更新折扣最大值并修正当前折扣
salePriceInput.addEventListener('input', () => {
  const maxDiscount = getMaxDiscount();
  // 设置输入框原生max属性，从UI层面限制输入范围
  discountInput.max = maxDiscount;
  
  // 若当前折扣超出最大值，自动修正
  const currentDiscount = parseFloat(discountInput.value) || 0;
  if (currentDiscount > maxDiscount) {
    discountInput.value = maxDiscount;
  }
});

// 折扣输入时，实时检查并修正超出值
discountInput.addEventListener('input', () => {
  const maxDiscount = getMaxDiscount();
  const currentDiscount = parseFloat(discountInput.value) || 0;
  
  if (currentDiscount > maxDiscount) {
    discountInput.value = maxDiscount;
  }
});

3. 特殊场景处理（折扣为百分比形式） #

如果你的折扣是百分比（比如输入50代表50%），要保证折扣金额不超过售价的50%，可以调整逻辑：

discountInput.addEventListener('input', () => {
  const salePrice = parseFloat(salePriceInput.value) || 0;
  const discountPercent = parseFloat(discountInput.value) || 0;
  const actualDiscount = salePrice * (discountPercent / 100);
  const maxAllowedDiscount = salePrice * 0.5;
  
  if (actualDiscount > maxAllowedDiscount) {
    discountInput.value = 50;
  }
});

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