Home How do you use Math.floor so that the output of the input tag gets rounded down

Questions

How do you use Math.floor so that the output of the input tag gets rounded down

April 30, 2023

I’m making an "Bank" page for school. One of the criterias are that the input number (deposit or withdraw) must be rounded down, so no commas. But i can’t seem to figure it out. I’ve also tried to restrict the input så that you can’t enter anny commas or dots in the input, but that is not what i’m lokking to do.

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 = '';
}
})

<!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>

I have tried enterin Math.floor(balance.innerText); & Math.floor(Number); in different areas of the code.

>Solution :

You just need to apply Math.Floor when getting the value of the input in the HTML, in your case in line 10 of the JS you define value equals to whatever its on the depositInput box, just change that line to this

let value = Math.floor(depositInput.value);

Then to the same for the withdrawInput line, this way if for example 5.3 is added to the box, it will automatically be rounded down when defining "value"