innerHTML返回带有文本的NaN

innerHTML return NaN with text

本文关键字：NaN 文本 返回 innerHTML      更新时间：2023-09-26

我遇到一个问题，我试着用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

我做错什么了吗

变化

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上没有执行数字转换。

这是因为您进行了转换 (+fieldValue)到number。当你添加""在你面前，使转换到string (""+fieldValue)。你可以在这里阅读更多关于JavaScript类型转换的内容

使用这个，我希望一切都很好。不要在fieldValue前使用"+"号，因为它试图与之前尚未定义的字段连接。

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

，并确保"fieldValue"是否出现，在上面的行之前发出警报，如。

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

下面是经过重构的代码的正确版本。希望对你有帮助。

    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;              
   }

谢谢你的回答和解释。

你提高了我的知识。=)

一切都很好知道:

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

我在向innerHTML打印变量编号时遇到了这个错误，我通过为我想要打印的变量分配初始值来解决这个问题。

相关文章：