issues with isNan function

Question

I have a text box and button where a User must input a mark between 1 and 10. After such inner HTML displays the mark as a percentage.

I am having a bit of difficult getting myisNaN function to work within my code for numbers that exceed 10 or for values that are indeed not numbers.

The code works well except for this specific part and I am wondering where I am going wrong.

<script>

    function myFunction() {

        var x, text;

        // Get the value of the input field with id="numb"
        x = document.getElementById("numb").value;

        // If x is Not a Number or less than one or greater than 10
        if (isNaN(x) || x < 1 || x > 10) {
            text = "Input not valid";
        } else  {
            text = "Your final mark is";
        }



        document.getElementById("demo").innerHTML = (x) * 10 + "%";
    }

    </script>



<body>

    <h1>JavaScript to Validate Input</h1>

    <p>Enter your mark between 1 and 10:</p>

    <input id="numb">

    <button type="button" onclick="myFunction()">Submit</button>

    <p id="demo"></p>




</body>

What isn't working? What result are you getting that you don't expect? — T.J. Crowder, Mar 26 '17 at 11:31
Side note: You're relying on *implicit* conversion from string to number. Your `x` will contain a string (the value of `value` is always a string). It just happens that everything you're doing with `x` (`isNaN`, `<`, `>`, and `*`) will all implicitly convert for you, but if you'd done `x + something`, it wouldn't have. I suggest *explicitly* parsing the string to a number, up-front, where you get it from `.value`. [This answer](http://stackoverflow.com/a/30032514/157247) gives some of your options for doing that. — T.J. Crowder, Mar 26 '17 at 11:34
yes so it will acknowledge the Isnan but if I input 12 which is above the range of the function, it still executes the calculation — Syntax Killer, Mar 26 '17 at 11:35

gyre · Accepted Answer · 2017-03-26T11:46:13.783

Your if-else logic is working correctly (provided you first coerce your string x to a number using the unary + operator); the problem is that you're not doing anything with your text variable. You should only be adding the percentage to your text when the input is valid, like so:

function myFunction() {

  var text

  var x = +document.getElementById("numb").value

  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid"
  } else {
    text = "Your final mark is: " + (x * 10) + "%"
  }

  document.getElementById("demo").textContent = text
}

<body>
  <h1>JavaScript to Validate Input</h1>
  <p>Enter your mark between 1 and 10:</p>
  <input id="numb">
  <button type="button" onclick="myFunction()">Submit</button>
  <p id="demo"></p>
</body>

score 0 · Answer 2 · answered Mar 26 '17 at 11:35

You should put document.getElementById("demo").innerHTML = (x) * 10 + "%"; inside the else block

function myFunction() {

        var x, text;

        // Get the value of the input field with id="numb"
        x = document.getElementById("numb").value;

        // If x is Not a Number or less than one or greater than 10
        if (isNaN(x) || x < 1 || x > 10) {
            text = "Input not valid";
        } else  {
           document.getElementById("demo").innerHTML = (x) * 10 + "%";
            text = "Your final mark is";
        }
        console.log(text);



        
    }

<body>

    <h1>JavaScript to Validate Input</h1>

    <p>Enter your mark between 1 and 10:</p>

    <input id="numb">

    <button type="button" onclick="myFunction()">Submit</button>

    <p id="demo"></p>




</body>

issues with isNan function

2 Answers2