innerHTML return 带有文本的 NaN

Question

我有问题，我尝试 return 一个带有 innerHTML 的值，但我得到了一个 NaN。我知道我的变量不是数字，但为什么他一直告诉我这个？

function checkWord(id, nameOutput){
    var pattern = new RegExp("\b(hello|world)\b", "i");
    var fieldValue = document.getElementById(id).value;
    var result = fieldValue.search(pattern);
    if (result != -1){
        document.getElementById(nameOutput).style.color = "green";
        document.getElementById(nameOutput).innerHTML = +fieldValue+ " is correct";
    }
    else{
        document.getElementById(nameOutput).style.color = "red";
        document.getElementById(nameOutput).innerHTML = +fieldValue+ " is incorrect";
    }
    if(fieldValue == null || fieldValue == ""){
        document.getElementById(nameOutput).style.color = "orange";
        document.getElementById(nameOutput).innerHTML = "Empty field";
    }     
}

我总是NaN 不正确 或NaN 是正确的 为什么我无法打印值？

如果我这样写:

document.getElementById(nameOutput).innerHTML ="" +fieldValue+ " is correct";
document.getElementById(nameOutput).innerHTML ="" +fieldValue+ " is incorrect";

一切正常！！但是为什么我需要在 innerHTML

中写这个 ""

我是不是做错了什么？

Answer 1

发生这种情况是因为您进行了转换 (+fieldValue) 到 number。当您在前面添加 "" 时，您会进行转换到 string (""+fieldValue)。您可以阅读有关 JavaScript type conversion here.

的更多信息

Answer 2

改变

document.getElementById(nameOutput).innerHTML = +fieldValue+ " is correct";

至

document.getElementById(nameOutput).innerHTML = fieldValue + " is correct";

因为 = +fieldValue 缺少 add/concatenate 到 fieldValue 的内容。因此，取而代之的是对一个数字进行强制转换，这会导致未定义的数字或 NaN。

当你尝试时

document.getElementById(nameOutput).innerHTML ="" +fieldValue+ " is correct";

您提供了连接到 fieldValue 的内容，即一个空字符串，因此未对 fieldValue.

执行任何数字转换

Answer 3

使用它，希望一切顺利。不要在 fieldValue 之前使用“+”号，因为它会尝试与尚未定义的前一个连接。

    document.getElementById(nameOutput).innerHTML = fieldValue+ " is incorrect";

并通过在上面的行之前提醒它来确保 "fieldValue" 即将到来。

alert("Value of "+fieldValue);
document.getElementById(nameOutput).innerHTML = fieldValue+ " is incorrect";

Answer 4

这是一个带有重构代码的正确版本。希望对你有帮助。

    function checkWord(id, nameOutput){
      var pattern = new RegExp("\b(hello|world)\b", "i"),
          fieldValue = document.getElementById(id).value,
          result = fieldValue.search(pattern),
          output = document.getElementById(nameOutput),
          color, ohtml;
          if (result!= -1){
            color = 'green';
            ohtml = fieldValue + " is correct"
          }
         else{
           color = "red";
           ohtml = fieldValue + " is incorrect";
         }
        if(fieldValue == null || fieldValue == ""){
          color = "orange";
          ohtml = "Empty field";
        }   
         output.style.color = color;
         output.innerHTML = ohtml;              
   }

Answer 5

感谢您的所有回答和解释..

你增长了我的知识。 =)

而且一切正常知道:

document.getElementById(nameOutput).innerHTML = fieldValue+ " is correct";

document.getElementById(nameOutput).innerHTML = fieldValue+ " is incorrect";

innerHTML return 带有文本的 NaN

innerHTML return NaN with text

javascript

innerhtml