如何在oninput事件中获取其他函数变量值以更新total_saving

下面提供几种实用方案，帮你实现输入框触发oninput后同步更新总储蓄值：

方案1：抽离独立的总储蓄计算函数（最推荐） #

不用在函数间传递变量，而是把总储蓄的计算逻辑单独封装，每个输入处理函数触发时直接调用这个计算函数，从DOM读取最新的输入值。这种方式避免全局变量污染，还能保证数据同步。

// 统一计算并更新总储蓄的函数
function updateTotalSaving() {
  // 直接从输入框读取最新值，空值或非数字默认设为0
  const elecValue = parseFloat(document.getElementById('elec-input').value) || 0;
  const cosmValue = parseFloat(document.getElementById('cosm-input').value) || 0;
  
  // 根据你的实际预算逻辑计算总储蓄，这里示例为两分类相加
  const total_saving = elecValue + cosmValue;
  
  // 同步更新页面上的总储蓄展示元素
  document.getElementById('total-saving').textContent = total_saving.toFixed(2);
}

// 电费输入框的处理函数
function reflect_elec() {
  updateTotalSaving(); // 触发总储蓄更新
}

// 化妆品输入框的处理函数
function reflect_cosm() {
  updateTotalSaving(); // 触发总储蓄更新
}

方案2：用全局变量共享输入值 #

如果需要在多个地方复用输入值，可以把变量声明在全局作用域，每个处理函数更新对应变量后再计算总储蓄：

// 全局声明各分类的输入值变量
let inputValue_elec = 0;
let inputValue_cosm = 0;

function updateTotalSaving() {
  const total_saving = inputValue_elec + inputValue_cosm;
  document.getElementById('total-saving').textContent = total_saving.toFixed(2);
}

function reflect_elec() {
  inputValue_elec = parseFloat(document.getElementById('elec-input').value) || 0;
  updateTotalSaving();
}

function reflect_cosm() {
  inputValue_cosm = parseFloat(document.getElementById('cosm-input').value) || 0;
  updateTotalSaving();
}

方案3：事件委托简化多输入框处理 #

如果页面上有很多分类输入框，不用给每个输入框单独绑定oninput，可以给父容器绑定一次事件，统一处理：

<!-- 所有分类输入框放在同一个父容器里 -->
<div id="category-inputs">
  <input type="number" id="elec-input" placeholder="电费">
  <input type="number" id="cosm-input" placeholder="化妆品">
  <!-- 其他分类输入框 -->
</div>
<div id="total-saving">0.00</div>

document.getElementById('category-inputs').addEventListener('input', function() {
  const elecValue = parseFloat(document.getElementById('elec-input').value) || 0;
  const cosmValue = parseFloat(document.getElementById('cosm-input').value) || 0;
  const total_saving = elecValue + cosmValue;
  document.getElementById('total-saving').textContent = total_saving.toFixed(2);
});

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