DOM更新后如何获取JavaScript中配料初始值以计算份数？

当前代码的核心问题是：每次计算都会直接覆盖DOM中的配料数值，导致初始值被永久替换，后续再计算时只能基于修改后的值，无法回到原始份量重新计算。

解决方案一：用HTML data属性存储初始值 #

给每个配料数值的span标签添加data-original属性，专门保存初始值，计算时始终从这个属性取值：

修改后的HTML：

<div class="container recipe-portion">
  <span>配料份数</span>
  <div class="portioning">
    <!-- 修正input类型为number，增加范围限制 -->
    <input id="portion" type="number" placeholder="输入1-5之间的数字" min="1" max="5" />
    <button onclick="calcAmount()" class="btn">计算</button>
  </div>
</div>

<div class="container recipe-ingredients">
  <div class="ingredients">
    <p><span class="span" data-original="200">200</span>g 面粉</p>
  </div>
  <div class="ingredients">
    <p><span class="span" data-original="200">200</span>g 糖</p>
  </div>
  <div class="ingredients">
    <p><span class="span" data-original="50">50</span>g 可可粉</p>
  </div>
</div>

修改后的JavaScript：

function calcAmount() {
  let size = parseInt(document.getElementById('portion').value);
  // 校验输入是否为有效数字且在1-5范围内
  if (isNaN(size) || size < 1 || size > 5) {
    return;
  }
  let portions = document.querySelectorAll('.span');
  for (let portionEl of portions) {
    // 从data属性读取初始值计算
    let originalAmount = parseInt(portionEl.dataset.original);
    portionEl.innerText = originalAmount * size;
  }
  document.getElementById('portion').value = '';
}

解决方案二：在JavaScript中预先存储初始值 #

页面加载完成后，把所有配料的初始值保存到数组里，后续计算始终基于这个数组的原始值：

修改后的JavaScript：

// 页面加载时保存所有配料的初始值
let originalAmounts = [];
window.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.span').forEach(el => {
    originalAmounts.push(parseInt(el.innerText));
  });
});

function calcAmount() {
  let size = parseInt(document.getElementById('portion').value);
  if (isNaN(size) || size < 1 || size > 5) {
    return;
  }
  let portions = document.querySelectorAll('.span');
  for (let i = 0; i < portions.length; i++) {
    portions[i].innerText = originalAmounts[i] * size;
  }
  document.getElementById('portion').value = '';
}

额外优化点 #

• 把input的type="tex"修正为type="number"，并添加min="1"和max="5"，既能限制输入类型，又能通过浏览器原生控件约束输入范围。
• 增加isNaN校验，避免非数字输入导致计算错误。

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