如何使用Math.floor实现银行页面输入金额的向下取整？

我正在为学校制作一个“Bank”页面，其中一项要求是存款或取款的输入数值必须向下取整（无小数部分）。我尝试过限制输入框无法输入逗号或点，但这并非我想要的实现方式。我曾在代码的不同位置尝试使用Math.floor(balance.innerText)和Math.floor(Number)，但都没能成功实现需求。

以下是我的代码：

JavaScript代码 #

let deposit = document.getElementById('in'),
withdraw = document.getElementById('out'),
balance = document.getElementById('balance'),
depositInput = document.getElementById('depvalue'),
withdrawInput = document.getElementById('outvalue'),
depositBtn = document.getElementById('deposit-btn'),
withdrawBtn = document.getElementById('out-btn');

depositBtn.addEventListener('click', () => {
let value = depositInput.value;
if (Number(value) < 0.1) {
    alert("Invalid number")
} else if (Number(value) == ","){
    alert("Invalid number")
}
else {
let depositValue = Number(deposit.innerText) + Number(value);
let balanceValue = Number(balance.innerText) + Number(value);
deposit.innerText = depositValue;
balance.innerText = balanceValue;
depositInput.value = '';
}
})

withdrawBtn.addEventListener('click', () => {
let value = withdrawInput.value;
if (Number(value) > Number(balance.innerText)) {
    alert("You don't have enough balance to withdraw.");
}  else if (Number(value) < 0.9) {
    alert("Invalid number");
}
else {
    let balanceValue = Number(balance.innerText) - Number(value);
    let withdrawValue = Number(withdraw.innerText) + Number(value);
    withdraw.innerText = withdrawValue;
    balance.innerText = balanceValue;
    withdrawInput.value = '';
}
})

HTML代码 #

<!DOCTYPE html>
<html> 
<body>
<header>
    <h1>Bank</h1>
    <h3>Welcome ::User::</h3>
</header>

<main>
<div class="saldo">
    <div class="in">
        <h5>Deposit</h5>
        <h2><span id="in">0</span>kr</h2>
    </div>
    <div class="balance">
        <h5>Saldo</h5>
        <h2 class="balance"><span id="balance"> 1000</span>kr</h2>
    </div>
    <div class="out">
        <h5>Withdrawal</h5>
        <h2><span id="out">0</span>kr</h2>
    </div>
</div>

<div class="inut">
    <div class="deposit">
        <h2>Deposit</h2>
        <input type="number" id="depvalue">
        <button id="deposit-btn">Deposit</button>
    </div>

    <div class="withdrawal">
        <h2>Withdrawal</h2>
        <input type="number" id="outvalue">
        <button id="out-btn">Withdrawal</button>
    </div>
</div>
</main>
<footer>
<div class="logout">
    <a href="index.html">Log Out</a>
</div>
</footer>

<script src="js/bank.js"></script>
</body>
</html>

你之前的核心问题是没有正确对用户输入的数值应用Math.floor，而是错误地将其用在余额文本或空的Number构造函数上。下面是修改后的代码，同时优化了验证逻辑：

修改后的JavaScript代码 #

let deposit = document.getElementById('in'),
withdraw = document.getElementById('out'),
balance = document.getElementById('balance'),
depositInput = document.getElementById('depvalue'),
withdrawInput = document.getElementById('outvalue'),
depositBtn = document.getElementById('deposit-btn'),
withdrawBtn = document.getElementById('out-btn');

depositBtn.addEventListener('click', () => {
    let value = Number(depositInput.value);
    // 对输入值向下取整，确保最终使用整数金额
    const flooredValue = Math.floor(value);
    
    // 验证：取整后的值必须大于0，覆盖小数、0、负数等无效情况
    if (flooredValue <= 0) {
        alert("Invalid number");
        return;
    }

    // 先转换当前存储的数值，避免重复操作
    const currentDeposit = Number(deposit.innerText);
    const currentBalance = Number(balance.innerText);
    
    deposit.innerText = currentDeposit + flooredValue;
    balance.innerText = currentBalance + flooredValue;
    depositInput.value = '';
})

withdrawBtn.addEventListener('click', () => {
    let value = Number(withdrawInput.value);
    const flooredValue = Math.floor(value);
    
    if (flooredValue <= 0) {
        alert("Invalid number");
        return;
    }

    const currentBalance = Number(balance.innerText);
    if (flooredValue > currentBalance) {
        alert("You don't have enough balance to withdraw.");
        return;
    }

    const currentWithdraw = Number(withdraw.innerText);
    withdraw.innerText = currentWithdraw + flooredValue;
    balance.innerText = currentBalance - flooredValue;
    withdrawInput.value = '';
})

额外优化建议 #

如果想让浏览器默认限制输入小数，可以修改HTML中的input标签，添加step="1"属性：

<input type="number" id="depvalue" step="1">
<input type="number" id="outvalue" step="1">

关键修改点说明 #

• 先将用户输入转为数字，再用Math.floor()对输入值取整，确保运算时使用的是整数
• 简化验证逻辑：只要取整后的值≤0就判定为无效输入，无需单独判断逗号或小数阈值
• 提前转换当前余额、存款、取款的文本值为数字，提升代码可读性和执行效率

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