求助：Codeigniter环境下三值比较JS逻辑修复及状态显示异常解决

原代码存在的问题 #

1. 选择器使用错误：document.querySelector()仅返回第一个匹配元素，不能用[0]索引；且全局选择器无法识别新增行的元素，导致新行状态无法更新。
2. 比较逻辑颠倒：原代码判断value_from >= result和value_to <= result，这与需求（result处于value_from和value_to之间）完全相反。
3. 未处理无效输入：未判断输入是否为有效数字，非数字值会导致parseInt返回NaN，干扰判断结果。

修正后的代码示例 #

假设你的HTML结构是每行包含测试结果、区间上下限和状态输入框，且有新增行按钮：

<div class="rows-container">
  <div class="row">
    <input type="number" name="result" class="result" placeholder="测试结果">
    <input type="number" name="value_from" class="value_from" placeholder="最小值">
    <input type="number" name="value_to" class="value_to" placeholder="最大值">
    <input type="text" name="status" class="status" readonly placeholder="状态">
  </div>
</div>
<button id="addRow">新增测试行</button>

对应的JavaScript代码：

// 单一行的状态更新逻辑
function updateRowStatus(row) {
  // 获取当前行的所有输入元素
  const resultInput = row.querySelector('.result');
  const fromInput = row.querySelector('.value_from');
  const toInput = row.querySelector('.value_to');
  const statusInput = row.querySelector('.status');

  // 转换为整数，第二个参数指定十进制避免意外行为
  const result = parseInt(resultInput.value, 10);
  const valueFrom = parseInt(fromInput.value, 10);
  const valueTo = parseInt(toInput.value, 10);

  // 处理无效数字输入
  if (isNaN(result) || isNaN(valueFrom) || isNaN(valueTo)) {
    statusInput.value = '';
    return;
  }

  // 正确的区间判断逻辑：测试结果在最小值和最大值之间（包含边界）
  statusInput.value = (result >= valueFrom && result <= valueTo) ? 'pass' : 'fail';
}

// 给现有行绑定实时更新事件
document.querySelectorAll('.row').forEach(row => {
  // 监听当前行所有可输入框的输入事件
  row.querySelectorAll('input:not(.status)').forEach(input => {
    input.addEventListener('input', () => updateRowStatus(row));
  });
});

// 新增行功能，同时绑定事件
document.getElementById('addRow').addEventListener('click', () => {
  const container = document.querySelector('.rows-container');
  const newRow = document.createElement('div');
  newRow.className = 'row';
  newRow.innerHTML = `
    <input type="number" name="result" class="result" placeholder="测试结果">
    <input type="number" name="value_from" class="value_from" placeholder="最小值">
    <input type="number" name="value_to" class="value_to" placeholder="最大值">
    <input type="text" name="status" class="status" readonly placeholder="状态">
  `;
  container.appendChild(newRow);

  // 给新行绑定输入事件
  newRow.querySelectorAll('input:not(.status)').forEach(input => {
    input.addEventListener('input', () => updateRowStatus(newRow));
  });
});

关键改进说明 #

• 行级处理：通过row参数定位当前行的元素，完美支持新增行的状态更新。
• 逻辑修正：确保测试结果处于value_from和value_to区间内时显示pass，否则显示fail。
• 输入校验：加入isNaN判断，避免非数字输入导致的错误状态。
• 实时更新：绑定input事件，输入内容变化时自动更新状态，无需手动触发函数。

内容的提问来源于stack exchange，提问作者Ayu Asri Lestari