求助：用jQuery的if/else语句在输入框显示Approved或Rejected（代码失效）

核心错误点 #

你的代码里有个关键错误：给输入框#txtCom设置内容时用了.text() = "xxx"，但<input>类型的元素需要用.val()方法来设置值，.text()仅适用于非输入类DOM元素（比如<div>、<span>）的文本设置。

修正后的完整代码 #

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input type="text" id="txtLon" required />
<input type="text" id="txtPro" required />
<input type="text" id="txtLim" value="66.67" readonly />

<input type="text" id="txtPer" readonly />
<input type="text" id="txtCom" readonly />

JavaScript部分

$(function() {
  // 缓存DOM元素，减少重复查询提升性能
  const $txtLon = $("#txtLon");
  const $txtPro = $("#txtPro");
  const $txtLim = $("#txtLim");
  const $txtPer = $("#txtPer");
  const $txtCom = $("#txtCom");

  // 只监听用户手动输入的输入框，txtPer为计算生成无需监听
  $txtLon.add($txtPro).add($txtLim).on("keyup", calc);

  function calc() {
    const lonVal = Number($txtLon.val()) || 0;
    const proVal = Number($txtPro.val()) || 0;
    const limVal = Number($txtLim.val()) || 0;
    let perVal = 0;

    // 处理除数为0的情况，避免出现NaN
    if (proVal !== 0) {
      perVal = (lonVal / proVal) * 100;
      // 保留2位小数，避免过长的百分比数值
      $txtPer.val(perVal.toFixed(2));
    } else {
      $txtPer.val("");
    }

    // 用val()设置输入框内容
    if (perVal <= limVal) {
      $txtCom.val("Approved");
    } else {
      $txtCom.val("Rejected");
    }
  }
});

额外优化说明 #

• 缓存DOM元素：提前获取所有需要操作的输入框，避免每次触发calc函数都重复查询DOM，提升性能。
• 除数为0处理：当#txtPro的值为0时，避免计算出现NaN，清空#txtPer的内容。
• 保留小数位数：用toFixed(2)把百分比数值保留2位小数，显示更整洁。
• 优化监听范围：只监听用户手动输入的#txtLon、#txtPro、#txtLim，#txtPer是自动计算的，不需要监听它的keyup事件。

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