JavaScript 使用 isNaN 来验证返回 NaN

我想你的要求有点混乱，或者至少我对它们感到困惑。因此，为了回答您的问题，我将重新表述要求，以便更好地理解它们。这是一个有用的练习，当我不能 100% 确定要求时，我会尝试这样做;如果我不能正确满足要求，那

因此，据我了解，要求是：

Given each amount input
When the input has a value
And that value is a number
Then add the value to the total
And make the input color black
But if the input does not have a value
Or that value is not a number
Then make the input color red

通过您的代码，我可以看到它存在许多问题。首先，我注意到 AmountNumber 和 AmountValue 都是全局变量，因为它们没有使用 var 关键字声明为局部变量。因此，在修复我们的代码之前，让我们更改它。我们还将变量名称更改为更准确地描述它们是什么的名称，希望使代码更易于理解：

var input = $('amount' + i);
var value = input.value;

现在，请注意，我选择将元素存储在 input 变量中。这样我们就不必在循环中多次查找它。在 DOM 中查找内容可能很昂贵，因此我们希望将其保持在最低限度。还有其他查找元素，例如getElementsByClassName，querySelector和querySelectorAll;这些留给读者研究和评估

接下来，在循环的每次迭代中，检查AmountValue不是字符串，同时不是数字：

if (AmountValue != "" && isNaN(AmountValue)) {

只要AmountValue是真实的（非空字符串就是这种情况），只要isNaN认为它是一个数字（包含数字的字符串就是这种情况），这都是正确的。这确实相当令人困惑;如果我正确理解您的代码，则此子句用于检查无效输入，如果为 true，则应将输入字段标记为红色并设置标志。即，这是上述要求中的 but 条款。

让我们将其重写为 when 子句，稍后我们会处理。在我们这样做之前，让我们看一下 myErrorFlag .我认为，它被用来查看所有输入是否都格式正确，在这种情况下，将其全部相加。好吧，验证和求和可以一举完成，所以让我们去掉标志并在验证它们时对值求和。因此，我们将myErrorFlag替换为total变量：

var total = 0;

现在，让我们回到我们的条款。要求说：

When the input has a value
And that value is a number
Then add the value to the total

在代码中，它应该看起来像这样：

if (value && !isNaN(value)) {
  total += parseInt(value, 10);
  input.style.color = 'black';
}

这里有几件事发生。首先，if语句已经从原来的情况发生了一些变化。它首先检查value是否真实，然后检查它是一个数字。第二个检查可能有点难以阅读，因为它本质上是一个双重否定;在英语中，它读作"不是数字"，即"是一个数字"。我将把它留给读者一个练习，以确定是否有一种更容易理解的方法来编写此检查。

现在，我们要求中的 but 条款呢？

But if the input does not have a value
Or that value is not a number
Then make the input color red

好吧，它本质上与我们之前的语句相反，所以让我们简单地添加一个else子句：

else {
  input.style.color = 'red';
}

由于要求未在此子句中提及total变量，因此它被简单地忽略，并且不会显示在最终结果中。

将其全部加起来（没有双关语）代码 - 带有注释 - 如下所示：

var calculateBills = function () {
  var total = 0;
  for (i = 1; i <= 4; i++) {
    // Given each amount input
    var input = $('amount' + i);
    var value = input.value;
    if (value && !isNaN(value)) {
      // When the input has a value
      // And that value is a number
      // Then add the value to the total
      total += parseInt(value, 10);
      // And make the input color black
      input.style.color = 'black';
    } else {
      // But if the input does not have a value
      // Or that value is not a number
      // Then make the input color red
      input.style.color = 'red';
    }
  }
  $('total').value = total;
};

中可以学到更多的东西来制作更好的代码。例如，如果输入数更改，或者其 ID 名称更改，则此代码将中断。这是因为它们是通过其 ID 专门选择的，因此，如果这些更改，则此代码将不再起作用。

另一个潜在的问题是，当我们循环访问输入时，我们会在输入上设置内联样式。这意味着为了使此代码与网站的样式保持同步，它必须更改。通常，像这样混合样式和功能不是一个好主意，应该避免。一种方法是改用类名，并打开和关闭这些类名。顺便说一下，这也可能有助于我提到的上一个问题。

还有其他问题，但我们会把这些问题留到另一天。希望这有帮助！

试试这个

var calculateBills = function () {
    var Amount = 0;
    for (i = 1; i <= 4; i++) {
        var AmountElement = $('amount' + i),
            AmountValue = AmountElement.value;
        if (AmountValue != "" && !isNaN(AmountValue)) {
            AmountElement.style.color = "red";
            Amount += parseInt(AmountValue,10);
        } else {
            AmountElement.style.color = "";
        }
    }
    $('total').value = Amount;
};

演示

无论如何，与其使用带有 id 的元素，如 id="amount1"、id="amount2"、id="amount3" 等，你可以使用类（例如 class="amount" ）并用 .getElementsByClassName 获取它们