Html Question posted in
Some basic documentation can be found here.

Html – isNaN alert is responding every time. Even when the value is number

In my code I have an if statement, using an isNaN(). It is checking the input on a number field. If the input isNaN() (is not a number) it should throw and alert() Right now it’s throwing that alert no matter what is input. Could you help? Thanks. Here’s my code:

const increaseValue = document.getElementById('positive');
const enter = document.getElementById('enter-value');

// input reception code

function useInput(){
    enter.addEventListener('click', function(){
        if(isNaN(increaseValue)){
            alert("Your input was not a number! Try again.");
        }
    })
}
useInput();
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="veiwport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="FinanceTool.css">
    <title>Finance_Tool</title>
</head>
<body>
    <main>
            <input type="number" id="positive" class="input" placeholder="Input financial increase." min="0"/>
            <button type="submit" id="enter-value">Enter</button>
    </main>
    <script src="FinanceTool.js"></script>
</body>
</html>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out. Thank you all for your help.


  2. 0

    If you run console.log(increaseValue), you’ll see that increaseValue is an instance of an HTML element. If you need to check if the input’s value is a number, you should change the check to:

            if(isNaN(increaseValue.value)){
            alert("Your input was not a number! Try again.");
        }

    Example:

    const increaseValue = document.getElementById('positive');
const enter = document.getElementById('enter-value');

// input reception code

function useInput(){
    enter.addEventListener('click', function(){
        if(isNaN(increaseValue.value)){
            alert("Your input was not a number! Try again.");
        }
    })
}
useInput();
    <html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="veiwport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="FinanceTool.css">
    <title>Finance_Tool</title>
</head>
<body>
    <main>
            <input type="number" id="positive" class="input" placeholder="Input financial increase." min="0"/>
            <button type="submit" id="enter-value">Enter</button>
    </main>
    <script src="FinanceTool.js"></script>
</body>
</html>
    Login or Signup to reply.
  3. 0

    The value of an <input type="number"> is an empty string if the value isn’t a valid number, and isNaN('') returns false.

    console.log(isNaN(''));

    But the input also has a property valueAsNumber that returns NaN for invalid input:

    const increaseValue = document.getElementById('positive');
const enter = document.getElementById('enter-value');

// input reception code

function useInput(){
    enter.addEventListener('click', function(){
        console.log(increaseValue.valueAsNumber);
        console.log(increaseValue.value);
        if(isNaN(increaseValue.valueAsNumber)){
            alert("Your input was not a number! Try again.");
        }
    })
}
useInput();
    <html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="veiwport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="FinanceTool.css">
    <title>Finance_Tool</title>
</head>
<body>
    <main>
            <input type="number" id="positive" class="input" placeholder="Input financial increase." min="0"/>
            <button type="submit" id="enter-value">Enter</button>
    </main>
    <script src="FinanceTool.js"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search