如何实现点击表格按钮触发JS计算与差值校验功能？

要改成按钮触发计算和校验，只需要做这几步：

1. 移除自动触发的keyup事件 #

直接删掉代码里的 document.addEventListener('keyup', keyuphandler);，输入框就不会再实时触发计算了。

2. 重构处理逻辑，让它能针对指定表格执行 #

把原来的keyuphandler改成可接收表格元素的函数，按钮点击时就能精准处理对应表格：

const reducer = (a, c) => a + c;
const average = (n) => {
  // 处理空值或非数字，避免出现NaN
  const num = parseFloat(n.value);
  return isNaN(num) ? 0 : num / 2;
};

// 重构后的处理函数，接收目标表格作为参数
const processTable = (table) => {
  const targetGroup = '1';
  const targetElem = 'carbon';

  // 获取当前表格内的输入框和结果框
  const result = table.querySelector(`tr[data-group="${targetGroup}"] input[data-elem="${targetElem}"].result`);
  const inputs = table.querySelectorAll(`tr[data-group="${targetGroup}"] input[data-elem="${targetElem}"].input`);

  // 计算平均值
  result.value = [...inputs]
    .map(average)
    .reduce(reducer, 0);

  // 校验carbon组1的差值
  const input1 = parseFloat(inputs[0].value);
  const input2 = parseFloat(inputs[1].value);
  if (isNaN(input1) || isNaN(input2)) {
    alert("请输入有效的数字");
    return;
  }
  const difference = Math.abs(input1 - input2);
  if (difference > 0.3) {
    alert("NOT REPEATABLE.");
  }
};

3. 实现按钮点击触发逻辑 #

让按钮点击时找到对应的表格，再调用处理函数：

function calculateAndCheckDifference() {
  // 通过点击的按钮找到它对应的表格
  const button = event.target;
  const table = button.previousElementSibling;
  processTable(table);
}

完整代码整合 #

HTML（保持原有结构即可） #

<table>
  <tr>
    <th>%<br />Carbon</th>
    <th>Average<br />Carbon</th>
  </tr>
  <tr data-group="1">
    <td><input type="text" class="input" data-elem="carbon" data-input="1" placeholder="input1" /></td>
    <td><input type="text" class="input" data-elem="carbon" data-input="2" placeholder="input2" /></td>
    <td><input type="text" class="result" data-elem="carbon" readonly placeholder="average" /></td>
  </tr>
</table>
<button onclick="calculateAndCheckDifference()">Calculate and Check</button>
<table>
  <tr>
    <th>%<br />Carbon</th>
    <th>Average<br />Carbon</th>
  </tr>
  <tr data-group="1">
    <td><input type="text" class="input" data-elem="carbon" data-input="1" placeholder="input1" /></td>
    <td><input type="text" class="input" data-elem="carbon" data-input="2" placeholder="input2" /></td>
    <td><input type="text" class="result" data-elem="carbon" readonly placeholder="average" /></td>
  </tr>
</table>
<button onclick="calculateAndCheckDifference()">Calculate and Check</button>

CSS（无需改动） #

table {
  width: 50px;
  box-sizing: border-box;
  border: 1px solid black;
  border-collapse: collapse;
  font-family: monospace
}

td {
  border: 1px solid black;
  padding: 0px;
  font-size: 10px;
}

th {
  border: 1px solid black;
  padding: 0px;
}

table {
  box-sizing: border-box;
  font-family: monospace
}

td,
th {
  padding: 0.25rem;
}

[data-elem='carbon'] {
  background: rgba(0, 0, 100, 0.1)
}

[data-elem='sulphur'] {
  background: rgba(0, 100, 0, 0.1)
}

[readonly] {
  background: rgba(255, 0, 0, 0.1)
}

.input {
  width: 3rem
}

.result {
  width: 3.5rem
}

input {
  border: 1px solid grey;
  padding: 0.2rem;
}

修改完成后，只有点击对应表格下方的按钮时，才会对该表格内的输入值计算平均值并校验差值，完全符合需求。

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