如何让函数返回变量？以及如何在HTML中输入数值并通过按钮调用函数将返回值赋值给变量

嗨，我来帮你搞定这个问题！先梳理下你现有代码里的几个小问题，然后一步步修正就能实现你想要的功能啦

现有代码的核心问题 #

• income函数的参数sumincome被局部重新声明，完全没用到参数的作用，而且每次调用都会把数值重置为0；如果是想累计收入/支出，变量不能放在函数内部（否则每次调用都会初始化）；
• 全局的var net = income() - expenses();只会在页面加载时执行一次，不会在你点击按钮后重新计算；
• 没有给按钮绑定点击事件，没法触发函数执行；
• 输入值可能为空或非数字，直接用parseInt会得到NaN，导致计算出错。

修正后的完整实现 #

HTML页面结构 #

先搭好输入、按钮和结果展示的区域：

<div>
  <label>收入：</label>
  <input type="number" id="income" placeholder="输入收入金额">
  <button onclick="calculateNet()">添加收入并计算</button>
</div>
<div>
  <label>支出：</label>
  <input type="number" id="expen" placeholder="输入支出金额">
  <button onclick="calculateNet()">添加支出并计算</button>
</div>
<div>
  <p>累计收入：<span id="resultin">0</span></p>
  <p>累计支出：<span id="resultexp">0</span></p>
  <p>净收入：<span id="netResult">0</span></p>
</div>

JavaScript逻辑代码 #

把累计的收入/支出变量放在全局（方便持续累加），调整函数逻辑并添加容错处理：

// 全局变量存储累计的收入和支出
let totalIncome = 0;
let totalExpenses = 0;

// 工具函数：安全获取输入框数值，避免非数字导致出错
function getInputValue(id) {
  const value = document.getElementById(id).value;
  return isNaN(parseInt(value)) ? 0 : parseInt(value);
}

function income() {
  const addIncome = getInputValue("income");
  totalIncome += addIncome;
  document.getElementById("resultin").textContent = totalIncome;
  // 清空输入框，方便下次输入
  document.getElementById("income").value = "";
  // 返回当前累计收入
  return totalIncome;
}

function expenses() {
  const addExpenses = getInputValue("expen");
  totalExpenses += addExpenses;
  document.getElementById("resultexp").textContent = totalExpenses;
  // 清空输入框
  document.getElementById("expen").value = "";
  // 返回当前累计支出
  return totalExpenses;
}

// 点击按钮后执行的核心函数：计算净收入
function calculateNet() {
  // 调用两个函数，获取它们的返回值
  const currentIncome = income();
  const currentExpenses = expenses();
  // 计算净收入并赋值给变量
  const net = currentIncome - currentExpenses;
  // 更新页面展示，同时也可以把net存到全局方便后续使用
  document.getElementById("netResult").textContent = net;
  window.net = net;
  console.log("当前净收入：", net);
}

关键细节说明 #

1. 函数返回值的使用：income()和expenses()会返回当前的累计金额，我们在calculateNet()里调用这两个函数，把返回值赋值给局部变量，再计算净收入；
2. 变量作用域：把totalIncome和totalExpenses放在全局，这样每次点击按钮都会持续累加，不会重置；
3. 容错处理：用getInputValue函数处理空值或非数字输入，避免计算出错；
4. 交互逻辑：按钮通过onclick绑定calculateNet函数，点击后自动完成累加、计算、页面更新的全流程。

如果你的需求不是累计，而是每次输入单独计算收入和支出的差值，只需要把累计变量移到函数内部，去掉累加逻辑即可：

function income() {
  const sumincome = getInputValue("income");
  document.getElementById("resultin").textContent = sumincome;
  return sumincome;
}

function expenses() {
  const sumexpenses = getInputValue("expen");
  document.getElementById("resultexp").textContent = sumexpenses;
  return sumexpenses;
}

这样每次点击按钮，都会取当前输入框的数值计算差值。

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