JavaScript存钱罐功能开发求助：减法逻辑异常问题

我是JavaScript新手，正在通过项目练习该编程语言。我制作了一个可存入、取出金额的存钱罐，现在想要实现以下逻辑：当取出金额大于现有余额时，不扣除金额、提示用户且余额不低于0，但自己编写的代码无法正常运行，请求帮助解决。

我的HTML代码 #

<!-- logo start-->
<div class="logo">Money Box</div>
<!-- logo end-->

<!-- money box start -->
<div class="form">
  <input type="number" class="money" /><br />
  <button type="submit" class="addition">+</button>
  <button type="submit" class="subtraction">-</button>
</div>
<div class="total--0" value="0">0</div>
<div class="minus"></div>
<!-- money box end -->

<!-- Optional JavaScript; choose one of the two! -->
<script src="script.js"></script>

我的JavaScript代码 #

"use strict";

const addition = document.querySelector(".addition");
const subtraction = document.querySelector(".subtraction");
let total = document.querySelector(".total--0");
const minus = document.querySelector(".minus");
const amount = document.querySelector(".money");

let sum = 0;
total = sum;
// console.log(total == 0);


//Add btn number
document.querySelector(".addition").addEventListener("click", function () {
  const writeMoney = Number(amount.value);

  minus.textContent = "";

  if (writeMoney) {
    amount.value = "";
    let mon = (sum += writeMoney);
    document.querySelector(".total--0").textContent = `$ ${mon}`;

  } else if (isNaN(amount) || amount < 0) {
    minus.textContent = "Invalid amount. Please enter a positive number.";
  }
});


//Remove btn number
subtraction.addEventListener("click", function () {
  const writeMoney = Number(amount.value);
  minus.textContent = "";

  if (writeMoney) {
    amount.value = "";
    let mon = (sum -= writeMoney);
    document.querySelector(".total--0").textContent = `$ ${mon}`;

  } else if (isNaN(amount) || amount < 0) {
    minus.textContent = "Invalid amount. Please enter a positive number.";

  } else if (writeMoney > total) {
    document.querySelector(".total").textContent = `You don't have that much money in your wallet`;
  }
});

问题分析与修复 #

你的代码存在几个关键问题：

• 变量覆盖错误：先将total赋值为DOM元素，后续又用total = sum把它改成数值0，导致余额判断逻辑混乱，应该用sum专门跟踪余额，保留DOM元素变量用于更新显示。
• 取款逻辑顺序错误：先执行扣款操作再判断余额是否足够，会导致余额先变成负数才提示错误。
• 输入验证错误：验证时判断的是DOM元素amount而非输入值writeMoney，且未覆盖输入为0的情况。
• 错误提示DOM选择错误：用document.querySelector(".total")选择不存在的元素，应该用指定的.minus元素显示提示。

修改后的JavaScript代码 #

"use strict";

const addition = document.querySelector(".addition");
const subtraction = document.querySelector(".subtraction");
const totalElement = document.querySelector(".total--0"); // 重命名避免混淆
const minus = document.querySelector(".minus");
const amountInput = document.querySelector(".money");

let sum = 0;
// 初始化显示余额
totalElement.textContent = `$ ${sum}`;

// 存款按钮逻辑
addition.addEventListener("click", function () {
  const writeMoney = Number(amountInput.value);
  minus.textContent = "";

  // 验证输入：必须是正数
  if (!isNaN(writeMoney) && writeMoney > 0) {
    amountInput.value = "";
    sum += writeMoney;
    totalElement.textContent = `$ ${sum}`;
  } else {
    minus.textContent = "无效金额，请输入正数。";
  }
});

// 取款按钮逻辑
subtraction.addEventListener("click", function () {
  const writeMoney = Number(amountInput.value);
  minus.textContent = "";

  // 先验证输入合法性
  if (isNaN(writeMoney) || writeMoney <= 0) {
    minus.textContent = "无效金额，请输入正数。";
    return;
  }

  // 判断余额是否足够
  if (writeMoney > sum) {
    minus.textContent = "余额不足，无法取出该金额。";
    return;
  }

  // 执行扣款
  amountInput.value = "";
  sum -= writeMoney;
  totalElement.textContent = `$ ${sum}`;
});

修复说明 #

• 重命名DOM元素变量为totalElement，避免与余额数值混淆，始终用sum跟踪当前余额。
• 调整取款逻辑顺序：先验证输入合法性，再判断余额是否足够，最后执行扣款，确保余额不会出现负数。
• 修正输入验证逻辑，覆盖非数字、0、负数等无效输入场景。
• 统一使用.minus元素显示错误提示，避免DOM选择错误。

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