2017-04-13 124 views
0

有人可以告诉我为什么下面的代码不会工作,并提供了一个可能的修复。当按钮被击中时,我希望它根据用户是否在输入字段中输入一个数字来显示正确或不正确。isNaN似乎没有正常工作

HTML:

<!DOCTYPE html> 
<body> 
<p>Enter name:</p> 
<input type="text" name="name"></input> 
<button onclick="checkpeople()" type = "button">check</button><br> 
<p id="message"></p> 
<script src="script.js"></script> 
</body> 

JS:

function checkpeople() { 
var name = ""; 
if (isNaN(name)) { 
name = "incorrect" 
} 
else { 
    name = "correct" 
} 
document.getElementById('message').innerHTML = name; 
} 
+1

传递给'isNaN()的参数'总是从'name'变量一个空字符串,*不*的值由用户输入,所以你的功能将始终显示“正确”。除了使用输入的'.value'属性外,您可以像输入元素的'.innerHTML'设置类似的方式从输入中获取值。 (顺便说一下,一旦您更改了代码以从输入中获取值,请注意,如果您将空字符串传递给'isNaN()',则返回'false'。) – nnnnnn

回答

0

isNAN(<argument>)是一个函数,告诉给定参数是否是非法的数量。 isNaN将参数转换为数字类型。如果你想检查参数是否是Numeric?请使用jQuery中的$.isNumeric()函数。

也就是说,isNaN(foo)等价于isNaN(Number(foo))它接受任何以数字为数字的字符串,原因很明显。例如。

isNaN(123) //false 
isNaN(-1.23) //false 
isNaN(5-2) //false 
isNaN(0) //false 
isNaN('123') //false 
isNaN('Hello') //true 
isNaN('2005/12/12') //true 
isNaN('') //false 
isNaN(true) //false 
isNaN(undefined) //true 
isNaN('NaN') //true 
isNaN(NaN) //true 
isNaN(0/0) //true 

jQuery.isNumeric():https://api.jquery.com/jQuery.isNumeric/ 如果你是独特的关于不使用jQuery和只用JavaScript doint它。您可以根据以下用途:isNan(parseInt(<argument>))isNan(parseFLoat(<argument>))

isNumber = function(obj){ 
 
    
 

 
    
 

 
    if (!isNaN(parseInt(obj))) { 
 
    // Is a number 
 
    return true; 
 
} 
 
else return false; 
 
} 
 

 
var num = 14; 
 
var textnum = '14'; 
 
var text = 'yo'; 
 
var nan = NaN; 
 

 
var DOM = document.getElementById("demo").innerHTML; 
 
document.getElementById("demo").innerHTML = isNumber(textnum, true);
<p id="demo"></p>

+1

*“除非另有标签框架/库也包括在内,预计纯JavaScript的答案“* - 从”JavaScript“标签信息。但是在任何情况下,'isNaN()'函数的行为都不是OP代码的主要问题。 – nnnnnn

1

的问题是,在checkPeople函数变量name没有任何链接到你的HTML的输入标签。您需要获取checkPeople函数中输入标记的值。我提供了以下工作代码:

function checkpeople() { 
 
var name = document.getElementById('myinput').value; 
 
if (isNaN(name)) { 
 
name = "incorrect" 
 
} 
 
else { 
 
    name = "correct" 
 
} 
 
document.getElementById('message').innerHTML = name; 
 
}
<!DOCTYPE html> 
 
<body> 
 
<p>Enter name:</p> 
 
<input type="text" name="name" id="myinput"></input> 
 
<button onclick="checkpeople()" type = "button">check</button><br> 
 
<p id="message"></p> 
 
</body>

+0

我也怀疑正确和不正确应该以另一种方式。我想知道一个数字的意图是不正确的。因为isNaN将返回正确的文本,这将是'正确的' – andrewf

2

isNaN()时,数据不是数字返回true。

function checkpeople() { 
 
var name = document.getElementById('myinput').value; 
 
if (isNaN(name)) { 
 
name = "correct" 
 
} 
 
else { 
 
    name = "incorrect" 
 
} 
 
document.getElementById('message').innerHTML = name; 
 
}
<!DOCTYPE html> 
 
<body> 
 
<p>Enter name:</p> 
 
<input type="text" name="name" id="myinput"></input> 
 
<button onclick="checkpeople()" type = "button">check</button><br> 
 
<p id="message"></p> 
 
</body>

0

首先isNaN看台为is Not a Number,因此,

isNaN(12234) //will be false 

虽然

isNaN("jsjsjw")// will return true. 

因此,在你的代码的条件,应调换。那就是如果你想让你的名字不是数字。

其次,您的代码不会连接您的输入,您需要从输入中获取值,然后再在js中检查它。

function checkpeople() { 
var name = document.getElementById('myinput').value; 
if (isNaN(name)) { 
    name = "correct" 
} 
else { 
    name = "incorrect" 
} 
document.getElementById('message').innerHTML = name; 
0

使用isInteger。它比isNaN好得多。

Number.isInteger(0);   // true 
Number.isInteger(1);   // true 
Number.isInteger('10');  // false 

以下是some problem with usingisNaN

document.write(isNaN("")) // false 
document.write(isNaN(" ")) // false 
document.write(isNaN(0)) // false 
document.write(isNaN(null)) // false 
document.write(isNaN(false)) // false 
document.write("" == false) // true 
document.write("" == 0) // true 
document.write(" " == 0) // true 
document.write(" " == false) // true 
document.write(0 == false) // true 
document.write(" " == "") // false 

如果您需要Internet Explorer支持,您可以使用polyfills

尽可能地使用原生JavaScript。你可以用JavaScript学习很多曲线,也不太依赖任何其他框架。

0

您还没有选择从文本框中输入的值,而只是比较空白字符串。

var name = ""; 
if (isNaN(name)) { 

下面是工作示例:

function checkpeople() { 
 
    // changed variable name, as there is global variable already defined i.e. `window.name` 
 
    var name_ = document.getElementsByName("name")[0].value; 
 
    if (!name_ || isNaN(name_)) { // if not empty and not a number 
 
    name_ = "incorrect" 
 
    } else { 
 
    name_ = "correct" 
 
    } 
 
    document.getElementById('message').innerHTML = name_; 
 
}
<p>Enter name:</p> 
 
<input type="text" name="name" /> 
 
<button onclick="checkpeople()" type="button">check</button><br> 
 
<p id="message"></p>