问题
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 ?
回答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
.
回答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.
回答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";
回答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;
}
回答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";
来源:https://stackoverflow.com/questions/30271865/innerhtml-return-nan-with-text