Question

我遇到了问题，我尝试用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

更改

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

到

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

因为= +fieldValue遗漏了要添加/连接到fieldValue的内容。因此，转换为数字，导致未定义的数字或NaN。

当你尝试

时

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

你提供了一些连接到fieldValue的东西，即一个空字符串，所以没有对fieldValue进行数字转换。

Answer 2

这种情况正在发生，因为您将转换（+fieldValue）设为number。当您在前面添加""时，将{strong>转化转换为string（""+fieldValue）。您可以阅读有关JavaScript type conversion here的更多信息。

Answer 3

使用此功能，我希望一切正常。不要使用＆＃34; +＆＃34;在fieldValue之前签名，因为它试图与之前未定义的那个连接。

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

并确保＆＃34; fieldValue＆＃34;通过在上面的线之前提醒它来或不来。

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用文本返回NaN

5 个答案: