动态数组与最大值计算功能整合问题求助

你的代码有三个核心问题导致最大值计算失效：

1. 计算逻辑仅执行一次：当前最大值计算代码仅在页面加载时运行一次，用户修改输入后不会重新计算，无法动态更新结果。
2. 字符串类型比较错误：input的value默认是字符串，直接用Math.max会按字典序比较（比如"10"会被认为小于"2"），而非数值大小。
3. 页面覆盖问题：document.write会在调用时覆盖整个页面内容，这不是动态更新结果的正确方式。

同时你已经通过form.elements["updates[]"]获取了所有输入框，没必要再通过id单独获取，属于冗余代码。

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <form>
        <div class="scd-item__qty">
          <input class="scd-item__qty_input" name="updates[]" value="5" id="awarie" />
        </div>
        <div class="scd-item__qty">
          <input class="scd-item__qty_input" name="updates[]" value="4" id="konserwacja" />
        </div>
        <div class="scd-item__qty">
          <input class="scd-item__qty_input" name="updates[]" value="3" id="mikroprzestoje" />
        </div>
        <!-- 新增显示结果的容器 -->
        <div id="max-result"></div>
        <script src="automatycznaTablica.js"></script>
      </form>
</body>
</html>

JavaScript部分 #

const form = document.forms[0];
const fc = Array.from(form.elements["updates[]"]);
const resultElement = document.getElementById('max-result');

// 初始化values数组，转换为数值类型
const values = fc.map(input => ({ input_value: Number(input.value) }));

// 绑定输入事件
fc.forEach(input => input.oninput = update);

// 更新values数组并重新计算最大值
function update(e) {
  let index = fc.indexOf(this);
  // 更新时转换为数值
  values[index].input_value = Number(this.value);
  // 每次输入变化后重新计算最大值
  calculateMax();
}

// 封装最大值计算逻辑
function calculateMax() {
  // 构建id和数值的映射对象
  const numbers = fc.reduce((acc, input) => {
    acc[input.id] = Number(input.value);
    return acc;
  }, {});

  // 计算最大值（确保是数值）
  const maxVal = Math.max(...Object.values(numbers));
  // 找到对应的id
  const key = Object.keys(numbers).find(key => numbers[key] === maxVal);

  // 更新结果容器内容，而非覆盖页面
  resultElement.textContent = `Highest value is: ${key}`;
}

// 页面加载时先执行一次计算
calculateMax();

• 动态计算触发：将最大值计算封装成calculateMax函数，在页面初始化和每次输入变化时调用，确保结果实时更新。
• 类型转换：所有input的value都通过Number()转换为数值类型，避免字符串比较错误。
• 结果容器：使用固定的<div id="max-result">来显示结果，替换document.write，避免页面被覆盖。
• 冗余代码移除：利用已有的fc数组构建数值映射，不再单独通过id获取每个输入框，简化逻辑。

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