How to prevent input box from knowing the difference between a number and a string?

Question

I currently have an input box and button on my webpage. When the user types in a number and clicks the button, it is supposed to add the number to a balance I assigned to it. If the user inputs a string, they should receive an error and the balance should not change. Everything seems to work fine, but once the user enters a number+string combination, the program does not work, and continues to add to the balance(for example if the user inputs 23fdsfsd the balance is increasing by 23 and no error message returns. But if the user enters the string fdsfsd the balance goes unchanged and an error message shows up). Here is the code I have as of right now:

document.getElementById('depositButton').addEventListener('click',function(){
    let input = parseInt(document.getElementById('userInput').value);
    if(input > 0){
        initialBalance = initialBalance + input
        document.querySelector('#balance span').innerHTML = initialBalance

    }else if(input != Number){
        document.querySelector('#balance span').innerHTML = initialBalance
        document.getElementById('notNumber').innerHTML = "ERROR: Please input a number!"
    }

}
)

I also tried getting rid of the parseInt statement in input as well. This didn't work and kept reading anything I typed in as a string.

HTML:

</head>
<body>
    <header>
        <h1>Welcome to Your ATM:</h1> 
        <h2>Checking Account:</h2>
    </header>

    <main>
        <section>
            <p id="balance">Current Balance: $<span></span></p>
        

        <form>
            <label for='amount'>Amount $:</label>
            <input id="userInput"  type="text"  value ="" name = "number" >
            <input id = 'resetChecking' type ="reset" value = "Reset">
        </form>
            <p id = "overdrawn"></p>
            <p id = "notNumber"></p>


       

        <div id = "buttons">
            
            <div id = "depositButton" class="button"><button type ="submit">Deposit</button></div>
            <br></br>
            <div id = "withdrawlButton" class="button"><button type ="submit">Withdrawl</button></div>
           
        </div>

Does this answer your question? [Check if string contains only digits](https://stackoverflow.com/questions/1779013/check-if-string-contains-only-digits) — Julia, Mar 08 '21 at 11:42
Does this answer your question? [(Built-in) way in JavaScript to check if a string is a valid number](https://stackoverflow.com/questions/175739/built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number) — Lee Goddard, Mar 08 '21 at 11:45
just a tip, change your input type to `type="number"`, You may also use `input.valueAsNumber` instead of `input.value` — Endless, Mar 08 '21 at 12:43

score 1 · Answer 1 · answered Mar 08 '21 at 12:37

This should work!

const balanceSpan = document.querySelector("#balance span");
const message = document.getElementById("notNumber");
let initialBalance = 0;

balanceSpan.innerHTML = 0;

document.getElementById("depositButton").addEventListener("click", function() {
  let input = Number(document.getElementById("userInput").value);

  if (input > 0 && !isNaN(input)) {
    initialBalance += input;
    balanceSpan.innerHTML = initialBalance;
    message.innerHTML = "Deposited! ";
  } else {
    message.innerHTML = "ERROR: Please input a number! ";
  }
});

<header>
  <h1>Welcome to Your ATM:</h1>
  <h2>Checking Account:</h2>
</header>

<main>
  <section>
    <p id="balance">Current Balance: $<span></span></p>

    <form>
      <label for='amount'>Amount $:</label>
      <input id="userInput" type="text" value="" name="number">
      <input id='resetChecking' type="reset" value="Reset">
    </form>

    <p id="overdrawn"></p>
    <p id="notNumber"></p>

    <div id="buttons">
      <div id="depositButton" class="button"><button type="submit">Deposit</button></div>
      <br />
      <div id="withdrawlButton" class="button"><button type="submit">Withdrawl</button></div>
    </div>

  </section>
</main>

Codepen: https://codepen.io/manaskhandelwal1/pen/LYbgbjW?editors=1010

Note: br tag is a self-closing tag thus there is nothing such as <br></br>. It should <br />.

score 0 · Answer 2 · answered Mar 08 '21 at 11:54

Try casting the value to a Number, and/or testing whether or not it is or is not a number using isNaN:

const inputs = [1, 'one', '1'];

inputs.forEach(input => {
  console.log(Number(input));
  if (isNaN(input)) {
    console.log(input + ' is not a number');
  }
});

How to prevent input box from knowing the difference between a number and a string?

2 Answers2