HTML+JS如何实现动态增删输入框并灵活计算用户输入值平均值

以下是修正后可直接运行的完整代码，可实现输入项自由增删、实时统计输入框总数、自动计算输入数值平均值的需求：

<form>
   <div id="box">
    <input type="number" class="sj" placeholder="请输入数值"> 
    <input type="button" value="添加输入项" onclick="add_textbox()">
   </div>
   <!-- 统计结果展示区 -->
   <div style="margin-top: 16px;">
    <p>当前输入框总数：<span id="totalCount">0</span></p>
    <p>有效数值平均值：<span id="avgValue">0</span></p>
   </div>
</form>

<script>
const box = document.getElementById("box");
const totalCountEl = document.getElementById("totalCount");
const avgValueEl = document.getElementById("avgValue");

// 通用统计更新函数，增删操作、输入内容变化时统一调用
const updateStats = () => {
  // 获取所有数值输入框
  const allInputs = document.querySelectorAll('#box .sj');
  // 统计总数量：直接取DOM集合长度
  const total = allInputs.length;
  totalCountEl.textContent = total;

  // 计算平均值
  let validSum = 0;
  let validNum = 0;
  allInputs.forEach(input => {
    const val = parseFloat(input.value.trim());
    // 过滤空值、非数字类非法输入
    if (!isNaN(val)) {
      validSum += val;
      validNum++;
    }
  })
  // 无有效输入时显示0，避免除以0报错；有有效输入时保留2位小数
  avgValueEl.textContent = validNum === 0 ? '0' : (validSum / validNum).toFixed(2);
}

// 新增输入框逻辑
const add_textbox = () => {
  const newP = document.createElement('p');
  // 新增输入框统一加sj类名，和初始输入框保持一致，方便统一选取
  newP.innerHTML = "<input type='number' class='sj' placeholder='请输入数值'> <input type='button' value='删除' onclick='remove(this)'>";
  box.appendChild(newP);
  // 新增完成后刷新统计结果
  updateStats();
}

// 删除输入框逻辑
const remove = (obj) => {
  box.removeChild(obj.parentNode);
  // 删除完成后刷新统计结果
  updateStats();
}

// 事件委托：监听所有输入框的输入动作，实时更新统计结果，无需给新增输入框单独绑定事件
box.addEventListener('input', (e) => {
  if (e.target.classList.contains('sj')) {
    updateStats();
  }
})

// 页面初始化时执行一次统计，加载默认状态的数值
updateStats();
</script>

核心问题实现说明 #

1. 动态输入框总数量统计 #

给所有用于数值输入的输入框（包括初始渲染、后续动态新增的）统一加上相同标识类名sj，需要统计数量时，直接调用document.querySelectorAll('#box .sj')获取匹配的DOM集合，集合的length属性就是当前输入框的实时总数量，不受增删操作影响。

原代码的核心问题就是新增的输入框没有加和初始输入框一致的sj类名，导致无法被统一选中统计。

2. 所有输入值获取与平均值计算 #

• 遍历上述拿到的所有输入框DOM集合，逐个取出输入值，转成数值类型后过滤掉空内容、非数字的非法输入
• 对合法输入值做累加，同时统计有效输入的个数
• 有效输入个数为0时直接返回0，避免除以0的报错；有有效输入时用累加和除以有效个数得到平均值，可按需调整保留的小数位数
• 统计函数在新增输入框、删除输入框、输入框内容变化三个时机触发，保证统计结果实时同步

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