修改资产potential loss时quota取最后索引值、报NaN错误如何解决

问题根因 #

• 事件逻辑错误：你在监听到某个资产的potential loss修改后，循环了所有资产的索引，每次都给当前触发修改的那一个资产的quota输入框赋值，循环结束后自然只会保留最后一个索引对应的计算值
• 类型未转换：输入框获取的value是字符串类型，未转换为数字直接参与计算，导致出现NaN报错
• 缓存值过时：第二种方案里的test数组仅在初始化时赋值，用户手动修改quota值后不会同步更新，计算时用了旧值甚至空值
• 事件绑定范围错误：第一种方案仅给页面加载时存在的第一个.perda元素绑定了事件，后续新增的资产对应的potential loss输入框不会触发监听逻辑

修复方案 #

1. Potential Loss修改逻辑重写 #

不需要提前缓存quota数组，每次触发修改时先定位当前资产的索引，直接从slices数组取对应资产的原始quota值计算即可，参考代码如下：

// 统一用事件委托监听所有.perda输入框的input事件，兼容后续新增的资产
document.querySelector(".loss").addEventListener("input", function (e) {
  const tgt = e.target;
  if (!tgt.classList.contains("perda")) return;

  // 获取当前修改的资产行对应的索引，你HTML里的data-index从1开始，减1对齐数组下标
  const currentRow = tgt.closest(".tr");
  const currentIndex = parseInt(currentRow.dataset.index) - 1;

  // 所有取值先转数字，加容错避免NaN
  const originQuota = Number(slices[currentIndex].quota);
  const lossVal = Number(tgt.value) || 0;
  const assetCount = slices.length;
  const indexSumRatio = 1 / assetCount;

  // 仅更新当前行的quota，同时同步到slices数组保证数据一致
  const newQuota = Math.round(originQuota - lossVal * indexSumRatio);
  currentRow.querySelector(".quota").value = newQuota;
  slices[currentIndex].quota = newQuota;

  // 如需修改后自动刷新饼图，放开下面的注释即可
  // drawChart();
});

2. 补充quota手动修改同步逻辑 #

给quota输入框加事件监听，用户手动修改quota值时同步更新到slices数组，保证后续计算用的是最新值：

document.querySelector(".loss").addEventListener("input", function (e) {
  const tgt = e.target;
  if (!tgt.classList.contains("quota")) return;
  const currentRow = tgt.closest(".tr");
  const currentIndex = parseInt(currentRow.dataset.index) - 1;
  slices[currentIndex].quota = Number(tgt.value) || 0;
});

3. 新增资产逻辑适配 #

写addStock新增资产的逻辑时，要给新生成的.tr节点的data-index属性按顺序赋值，保证索引和slices数组的下标一一对应即可。

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