innerHTML return NaN with text

Question

I got a problem, I try to return a value with innerHTML but I got a NaN. I know my variable is not a number but why he keep telling me that ?

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

I got always NaN is incorrect or NaN is correct why i can't get the value print ?

If i wrote like this :

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

Everything works well !! but why i need to write this "" in the innerHTML

Did I do something wrong ?

Answer 1

Change

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

to

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

because = +fieldValue is otherwise missing something to add/concatenate to fieldValue. So, instead a cast is made to a number which results in an undefined number, or NaN.

When you tried

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

you supplied something to concatenate to fieldValue, namely an empty string, so no number conversion was performed on fieldValue.

Answer 2

This is happening because you make a conversion (+fieldValue) to number. When you add "" in front of you make a conversion to string (""+fieldValue). You can read more about JavaScript type conversion here.

Answer 3

Use this and i hope everything work good. Don't use "+" sign before fieldValue because its try to concatenate with previous one which is not defined yet.

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

and also make sure about "fieldValue" is coming or not by alerting it before above line like.

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

Answer 4

Here is a correct version with refactored code. Hope it will help you.

    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

Thanks for all your answers and explications..

You improved my knowledge. =)

And everything works fine know with :

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

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

Answer 6

I had this error when printing a variable number to innerHTML and I solved the problem by assigning an initial value to the variable I wanted to print.