在单个HTML页面中用JavaScript计算并对比两组文本输入框

看起来你需要实现两组输入字段的独立计算，然后把结果放在一起对比对吧？我给你整理了一个完整的实现方案，包含HTML结构和JavaScript逻辑，你可以直接用或者按需修改：

完整代码示例 #

<!-- 第一组输入：浆果类 -->
<div class="input-group">
  <h3>第一组：浆果计算</h3>
  <input type="text" id="tmcp_textfield_1" name="blueberry" placeholder="blueberry" value="0" onkeydown="calculate()" onkeyup="calculate()">
  <input type="text" id="tmcp_textfield_2" name="plums" placeholder="plums" value="0" onkeydown="calculate()" onkeyup="calculate()">
  <p>第一组计算结果：<span id="result-group1">0</span></p>
</div>

<!-- 第二组输入：自定义品类 -->
<div class="input-group">
  <h3>第二组：其他品类计算</h3>
  <input type="text" id="a3" name="a3" placeholder="输入值1" value="0" onkeydown="calculate()" onkeyup="calculate()">
  <input type="text" id="a4" name="a4" placeholder="输入值2" value="0" onkeydown="calculate()" onkeyup="calculate()">
  <p>第二组计算结果：<span id="result-group2">0</span></p>
</div>

<!-- 对比结果展示区 -->
<div class="comparison-section">
  <h3>两组结果对比</h3>
  <p id="comparison-result">请输入数值进行计算</p>
</div>

<script>
function calculate() {
  // 处理第一组数据：获取输入值并转为数字（非数字输入默认取0）
  const blueberry = parseFloat(document.getElementById('tmcp_textfield_1').value) || 0;
  const plums = parseFloat(document.getElementById('tmcp_textfield_2').value) || 0;
  // 这里用求和作为示例，你可以改成乘积、平均值等逻辑
  const result1 = blueberry + plums;
  // 更新第一组结果显示
  document.getElementById('result-group1').textContent = result1.toFixed(2);

  // 处理第二组数据
  const val1 = parseFloat(document.getElementById('a3').value) || 0;
  const val2 = parseFloat(document.getElementById('a4').value) || 0;
  const result2 = val1 + val2; // 同样可自定义计算逻辑
  document.getElementById('result-group2').textContent = result2.toFixed(2);

  // 执行结果对比
  compareResults(result1, result2);
}

function compareResults(res1, res2) {
  const comparisonEl = document.getElementById('comparison-result');
  if (res1 > res2) {
    comparisonEl.textContent = `第一组结果(${res1.toFixed(2)}) 大于 第二组结果(${res2.toFixed(2)})`;
    comparisonEl.style.color = 'green';
  } else if (res1 < res2) {
    comparisonEl.textContent = `第一组结果(${res1.toFixed(2)}) 小于 第二组结果(${res2.toFixed(2)})`;
    comparisonEl.style.color = 'orange';
  } else {
    comparisonEl.textContent = `两组结果相等，均为 ${res1.toFixed(2)}`;
    comparisonEl.style.color = 'gray';
  }
}
</script>

<style>
.input-group {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}
.comparison-section {
  margin: 20px 0;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
}
input {
  margin: 0 10px 10px 0;
  padding: 8px;
  width: 150px;
}
</style>

关键细节说明 #

• 分组管理：用div.input-group把两组输入框物理分隔，结构清晰还方便后续加样式。
• 输入容错：通过parseFloat(...) || 0处理输入，避免用户输入非数字内容时出现NaN错误。
• 自定义计算：代码里用求和做示例，你可以直接修改result1和result2的计算逻辑，比如改成乘积blueberry * plums或者平均值(blueberry + plums)/2。
• 实时反馈：绑定onkeydown和onkeyup事件，用户输入时会实时更新计算结果和对比信息。
• 直观对比：对比结果用不同颜色区分，让差异一目了然。

扩展提示 #

• 如果需要增加更多输入字段，只需在对应分组里添加输入框，然后在calculate函数里新增取值和计算逻辑即可。
• 要是想限制输入只能是数字，可以把输入框的type改成number，或者在JavaScript里加额外的正则验证。

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