nextElementSibling适配问题：如何跨单元格联动更新输入框值

我在一个包含多组结果的表单中使用以下脚本，根据测试得分百分比自动录入对应分数。该脚本仅在输入框与输出框相邻时可正常运行，但将二者放入表格单元格等布局元素分开后脚本失效。我需要让该函数支持三十多组输入框对，希望适配表格等布局，多次改写代码均未成功，寻求技术帮助。

原有代码 #

HTML 部分 #

<td>
<input type="number" name="mod1a_s" class="input_select_teala_ltxt" id="mod1a_s" value="<?php echo $foo ?>" min="0" max="100" oninput="updateInputBox2(this)"/>
</td>

<td><input type="number"  name="mod1_s" class="input_select_teal_ltxt" id="mod1_s" max="3" min="0" step="1" value="<?php echo $foo ?>" /></td>

JavaScript 部分 #

function updateInputBox2(inputBox) {
  // 获取当前输入框的值
  var inputValue = parseFloat(inputBox.value);

  // 查找对应的输出框
  var outputBox = inputBox.nextElementSibling;

  // 根据分数区间计算对应输出值
  var outputBoxValue;
  if (inputValue >= 90) {
    outputBoxValue = 3;
  } else if (inputValue >= 80 && inputValue <= 89) {
    outputBoxValue = 2;
  } else if (inputValue >= 70 && inputValue <= 79) {
    outputBoxValue = 1;
  } else {
    outputBoxValue = 0;
  }

  // 更新输出框的值
  outputBox.value = outputBoxValue;
}

原脚本失效的核心原因是inputBox.nextElementSibling只能获取当前元素的相邻兄弟元素，当输入框和输出框被放在不同<td>单元格后，输入框的兄弟元素并非目标输出框，自然无法找到对应元素。

下面提供两种适配表格布局的解决方案：

方案一：利用ID命名规则关联（适配现有代码，改动最小） #

观察现有ID命名规律：输入框ID为modXa_s，对应输出框ID为modX_s（仅少一个a）。我们可以通过字符串处理从输入框ID推导输出框ID：

修改后的JavaScript代码：

function updateInputBox2(inputBox) {
  var inputValue = parseFloat(inputBox.value);
  // 从输入框ID推导对应输出框的ID
  var targetId = inputBox.id.replace('a_s', '_s');
  var outputBox = document.getElementById(targetId);

  if (!outputBox) return; // 找不到目标框时直接返回，避免报错

  var outputBoxValue;
  if (inputValue >= 90) {
    outputBoxValue = 3;
  } else if (inputValue >= 80 && inputValue <= 89) {
    outputBoxValue = 2;
  } else if (inputValue >= 70 && inputValue <= 79) {
    outputBoxValue = 1;
  } else {
    outputBoxValue = 0;
  }

  outputBox.value = outputBoxValue;
}

优点：无需修改现有HTML代码，直接复用现有ID命名规则即可，适合快速适配。

方案二：自定义数据属性关联（更灵活，扩展性强） #

如果后续ID命名规则可能变化，或者需要更明确的关联关系，可以给输入框添加自定义data-target-id属性，直接指定对应输出框的ID：

修改后的HTML（以第一组为例） #

<td>
<input type="number" name="mod1a_s" class="input_select_teala_ltxt" id="mod1a_s" value="<?php echo $foo ?>" min="0" max="100" oninput="updateInputBox2(this)" data-target-id="mod1_s"/>
</td>

<td><input type="number"  name="mod1_s" class="input_select_teal_ltxt" id="mod1_s" max="3" min="0" step="1" value="<?php echo $foo ?>" /></td>

修改后的JavaScript代码 #

function updateInputBox2(inputBox) {
  var inputValue = parseFloat(inputBox.value);
  // 通过自定义数据属性获取目标输出框的ID
  var targetId = inputBox.dataset.targetId;
  var outputBox = document.getElementById(targetId);

  if (!outputBox) return; // 找不到目标框时直接返回，避免报错

  var outputBoxValue;
  if (inputValue >= 90) {
    outputBoxValue = 3;
  } else if (inputValue >= 80 && inputValue <= 89) {
    outputBoxValue = 2;
  } else if (inputValue >= 70 && inputValue <= 79) {
    outputBoxValue = 1;
  } else {
    outputBoxValue = 0;
  }

  outputBox.value = outputBoxValue;
}

优点：关联关系清晰直观，不受ID命名规则限制，后续新增输入框对时，只需添加对应data-target-id即可，维护成本更低。

两种方案均支持任意数量的输入框对，且完全适配表格等布局结构，无需依赖元素的相邻关系。

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