function - If...else statements to check for NaN and empty string not working in JavaScript

I refactored FizzBuzz using functions and everything is working great except for two if..else statements in the function meant to validate the user's input (validateValue). I want to alert users that empty strings, decimals and NaN are not allowed. The statement checking for decimals works, but not empty strings or NaN. When I enter an empty string or NaN, the prompt for no decimals appears. I want to fix this using vanilla JavaScript, no jQuery.

Here is the JavaScript:

function getValue(message) {
  var msg = "Please enter a number from 1 to 100.";
  if (message) {
    msg = message;
  }
    return parseInt(prompt(msg)); 
}

function validateValue(num) { 
  if (num === "") { 
    return getValue("Please type something."); 
  } else if (num%1 !== 0) { 
    return getValue("No decimals allowed."); 
  } else if (isNaN(num)) { 
    return getValue("That is not a number!"); 
  } else {
    return num; 
  }
}

function fizzBuzz(num) {
   for (var i = 1; i <= num; i++) {
   if (i%15 === 0) {
    document.getElementById("list").innerHTML += "FizzBuzz<br>";
   }
   else if (i%3 === 0) {
    document.getElementById("list").innerHTML += "Fizz<br>";
  }
  else if (i%5 === 0) {
    document.getElementById("list").innerHTML += "Buzz<br>";
  }
  else {
    document.getElementById("list").innerHTML += i + "<br>";
  }
}
}

  var value = validateValue(getValue());
  fizzBuzz(value);

Here is the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>FizzBuzz Refactor</title>
</head>
<body>
    <div>
    <p>Your FizzBuzz results:</p>
    <ul id="list">
    </ul>
    </div>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

Here is the JavaScript:

function getValue(message) {
  var msg = "Please enter a number from 1 to 100.";
  if (message) {
    msg = message;
  }
    return parseInt(prompt(msg)); 
}

function validateValue(num) { 
  if (num === "") { 
    return getValue("Please type something."); 
  } else if (num%1 !== 0) { 
    return getValue("No decimals allowed."); 
  } else if (isNaN(num)) { 
    return getValue("That is not a number!"); 
  } else {
    return num; 
  }
}

function fizzBuzz(num) {
   for (var i = 1; i <= num; i++) {
   if (i%15 === 0) {
    document.getElementById("list").innerHTML += "FizzBuzz<br>";
   }
   else if (i%3 === 0) {
    document.getElementById("list").innerHTML += "Fizz<br>";
  }
  else if (i%5 === 0) {
    document.getElementById("list").innerHTML += "Buzz<br>";
  }
  else {
    document.getElementById("list").innerHTML += i + "<br>";
  }
}
}

  var value = validateValue(getValue());
  fizzBuzz(value);

Here is the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>FizzBuzz Refactor</title>
</head>
<body>
    <div>
    <p>Your FizzBuzz results:</p>
    <ul id="list">
    </ul>
    </div>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

Share Improve this question edited Apr 3, 2016 at 16:27 user663031 asked Apr 3, 2016 at 16:23 ev662 691 silver badge10 bronze badges

3 Well, for starters, NaN % 1 yields NaN, and NaN !== 0 is true, so NaN % 1 !== 0 is also true. – Frédéric Hamidi Commented Apr 3, 2016 at 16:27
1 num is something already processed by parseInt, so it cannot be "" – Aprillion Commented Apr 3, 2016 at 16:31
You never a get an empty string inside of validateValue, because you've already called parseInt – Bergi Commented Apr 3, 2016 at 16:31
as @charlietfl pointed out, you are checking for decimals after running parseInt, so "checking for decimals works" is not exactly true - decimals seem to be accepted without validation and truncated to integers – Aprillion Commented Apr 3, 2016 at 16:37
you don't validate the 2nd input when 1st is invalid - is that intentional or how many times do you want to prompt? – Aprillion Commented Apr 3, 2016 at 16:46

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

You probably want something like:

function validateValue(num) {
  if (num === "") {
    return getValue("Please type something."); 
  }

  num = parseFloat(num);

  if (isNaN(num)) {
    return getValue("That is not a number!"); 
  } else if (num%1 !== 0) { 
    return getValue("No decimals allowed."); 
  } else {
    return num; 
  }
}

A string can't be a NaN. So you need to try to convert it to a number before you check if it's NaN.

You can try something like this:

function validate(str) {
  if (validateEmpty(str)) {
    console.log("Input is emply");
  } else if (validateNum(str)) {
    console.log("Value is numeric");
  } else {
    console.log("Invalid Input");
  }
}

function validateEmpty(str) {
  return str === undefined || str == null || str.toString().trim().length === 0;
}

function validateNum(str) {
  var reg = /[0-9]/i;
  return reg.test(str);
}

(function() {
  var a = "";
  validate(a);
  a = "123.46";
  validate(a);
  a = "123.46.57";
  validate(a);
  a = "absl123.46.57";
  validate(a);
  a = "test";
  validate(a);
})()

Thanks everyone! Here's my solution, mented out:

function getValue(message) {
  var msg = "Please enter a number from 1 to 100."; // default message
  if (message) {
    msg = message;
  }
    return prompt(msg); // return prompt with appropriate message based on value
}

function validateValue(num) {
  if (num === "") {
    return getValue("Please type something."); // check for empty string
  }

  num = parseFloat(num); // converts string to floating number

  if (isNaN(num)) {
    return getValue("That is not a number!"); // check for NaN
  } else if (num%1 !== 0) { 
    return getValue("No decimals allowed."); // check for decimals
  } else {
    return num; 
  }
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

function - If...else statements to check for NaN and empty string not working in JavaScript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)