如何实现最小值标红、数值升高后恢复黑色并在左侧结果栏展示

完整实现代码 #

HTML #

<div class="container">
  <div class="result-panel">
    <div class="result-item" id="result1">Value 1: <span></span></div>
    <div class="result-item" id="result2">Value 2: <span></span></div>
    <div class="result-item" id="result3">Value 3: <span></span></div>
  </div>
  <form class="input-form">
    <label for="value1">Value 1:</label><br>
    <input type="number" id="value1" name="value1" oninput="updateResults()"><br>
    <br>
    <label for="value2">Value 2:</label><br>
    <input type="number" id="value2" name="value2" oninput="updateResults()"><br>
    <br>
    <label for="value3">Value 3:</label><br>
    <input type="number" id="value3" name="value3" oninput="updateResults()"><br>
  </form>
</div>

CSS #

.container {
  display: flex;
  gap: 20px;
}

.result-panel {
  width: 200px;
  padding: 10px;
  border: 1px solid #eee;
}

.result-item {
  margin: 10px 0;
  color: black;
}

.result-item.lowest {
  color: red;
  font-weight: bold;
}

.input-form {
  flex: 1;
}

JavaScript #

function updateResults() {
  // 获取输入和结果元素
  const inputs = [
    document.getElementById('value1'),
    document.getElementById('value2'),
    document.getElementById('value3')
  ];
  const results = [
    document.getElementById('result1'),
    document.getElementById('result2'),
    document.getElementById('result3')
  ];

  // 收集有效数值（处理空输入的情况）
  const values = inputs.map(input => {
    const num = parseInt(input.value);
    return isNaN(num) ? Infinity : num; // 空输入视为无穷大，不参与最小值判断
  });

  // 找到最小值
  const lowestValue = Math.min(...values);

  // 遍历更新结果并标记最小值
  results.forEach((result, index) => {
    // 更新结果显示文本
    const valueSpan = result.querySelector('span');
    valueSpan.textContent = inputs[index].value || '-';

    // 先移除所有lowest类，确保非最小值元素恢复黑色
    result.classList.remove('lowest');
    // 如果当前值是最小值且不为空，添加lowest类
    if (values[index] === lowestValue && !isNaN(values[index])) {
      result.classList.add('lowest');
    }
  });
}

关键修复与改进说明 #

1. 解决“无法恢复黑色”的问题 #

原代码仅给新最小值添加样式，未移除旧元素的标记类。现在每次执行函数时，先对所有结果项调用classList.remove('lowest')，再重新判断添加，确保非最小值元素样式被重置。

2. 实现左侧结果栏标注 #

• 新增.result-panel容器，与输入表单通过Flex布局横向排列，实现左侧显示结果的需求。
• 结果项与输入一一对应，单独展示数值并标记最小值，不影响输入框本身的样式。

3. 处理空输入边界情况 #

当输入框为空时，将其数值视为Infinity（不会被判定为最小值），同时结果显示为-，避免空值干扰逻辑判断。

4. 代码优化 #

用数组存储DOM元素，简化遍历逻辑；函数名改为updateResults()，更贴合当前“更新结果+标记最小值”的功能定位。

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