Javascript：即使使用parseInt（）函数，为什么我仍会得到NaN？

Question

I want to create a HTML page that can do the following tasks: 我想创建一个可以执行以下任务的HTML页面：

Take a number from the user 从用户那里取一个号码
Calculate a multiplication table and show it below the calculate button 计算乘法表并将其显示在“计算”按钮下方

Format of multiplication table should be like this, but on the same page and below the calculate button: 乘法表的格式应如下所示，但在同一页上并在“计算”按钮下方：

But I am getting NaN error, and also need help with how to get table displayed like this on the same page, please help and bear with my newbie mistakes :-) 但是我遇到了NaN错误，并且还需要有关如何在同一页面上以这种方式显示表格的帮助，请提供帮助并忍受我的新手错误:-)

 <!doctype html> <html> <head> <title>Multiplication Table</title> <script type="text/javascript"> function createTable(nn) { for(i=1; i<=10; i++) { document.getElementById("t1").innerHTML = nn*i; } return true; } </script> </head> <body> <h1><center>Assignment No.4</center></h1> <h4><center>Please Enter Number for Table and press the button</center><h4> <form> <center><input type="text" name="num" size=10></center><br /> <center><button type="button" onclick="createTable('n')">Calculate</button></center> </form> <center><p id="t1"></p></center> <script type="text/javascript"> m = "num".value; n = Number(m); </script> </body> </html>

Answer 1

There's no mystery 没有神秘感

m = "num".value;

here, m = undefined, because the string "num" has no property called value , ie it's undefined 在这里，m = undefined，因为字符串“ num”没有称为value属性，即undefined

n = Number(m);

Number(undefined) === NaN - because undefined is not a number Number（undefined）=== NaN-因为undefined不是数字

edit: also your onclick is called like this - createTable('n') 编辑：您的onclick也这样称呼-createTable（'n'）

same problem, 'n' is not a number, it's a string .. 'n' * anything == NaN 同样的问题，“ n”不是数字，它是一个字符串..“ n” *任何东西== NaN

Answer 2

There some problem with your program just see this one 您的程序存在一些问题，只需看一看

<!doctype html>

<html>
<head>
<title>Multiplication Table</title>
<script type="text/javascript">
function createTable()
{
    var nn = document.getElementById("num").value;

    var str="<table>";

    for(i=1; i<=10; i++)
    { 
        str+="<tr><td>" + nn + "*" + i +" = " + (nn*i) + "</td></tr>";
    }
    str+="</table>";

    document.getElementById("t1").innerHTML = str;
}
</script>
</head>

<body>
<h1><center>Assignment No.4</center></h1>
<h4><center>Please Enter Number for Table and press the button</center><h4>

<form>
<center><input type="text" id="num" name="num" size=10></center><br />
<center><button type="button" onclick="createTable()">Calculate</button></center>
</form>
<center><p id="t1"></p></center>
</body>
</html>

Answer 3

You are converting a value to a number, but it's at the wrong time, and it's the wrong value. 您正在将一个值转换为数字，但时间错误，并且值也不正确。 Then you don't even use the result. 然后，您甚至都不使用结果。

This code: 这段代码：

m = "num".value;
n = Number(m);

is executed when the page loads, so that's before the user has had any chance to enter any number. 是在页面加载时执行的，因此这是在用户有机会输入任何数字之前。 It doesn't use the field where the user could enter a number, it only uses the string "num" . 它不使用用户可以输入数字的字段，而仅使用字符串"num" 。 As the string isn't the input element, it doesn't have a property named value , so m gets the value undefined . 由于字符串不是输入元素，因此它没有名为value的属性，因此m获得了undefined值。 Turning that into a number gives you NaN , but that's not even the NaN that you get in the output, because the value of n is never used. 将其转换为数字将为您提供NaN ，但甚至不会从输出中获得NaN ，因为从不使用n的值。

This code: 这段代码：

onclick="createTable('n')"

doesn't use the variable n , it uses the string 'n' . 不使用变量n ，而是使用字符串'n' 。 That is what gives you the NaN in the output, because that is what you get when you try to use the string in the multiplication. 这就是在输出中提供NaN的原因，因为这就是您尝试在乘法中使用字符串时得到的结果。 Ie 'n' * i results in NaN . 即'n' * i得到NaN 。

To get the value that the user entered, you should get it at the time that the user clicks the button. 要获取用户输入的值，您应该在用户单击按钮时获取它。 Put the code in a function so that you can call it at that time. 将代码放在函数中，以便您可以在那时调用它。 Use the getElementsByName method to locate the element: 使用getElementsByName方法找到元素：

function getValue() {
   var m = document.getElementsByName("num")[0].value;
   return Number(m);
}

When the user clicks the button, call the function to get the value and send it to the function that creates the table: 当用户单击按钮时，调用该函数以获取值并将其发送给创建表的函数：

onclick="createTable(getValue())"

In your code where you create the table, you should put the items together and then put them in the page. 在创建表的代码中，应将各项放在一起，然后将其放到页面中。 If you put each item in the element, they will replace each other and you end up with only the last one. 如果将每个项目都放在元素中，它们将彼此替换，最后只剩下最后一个。 Also, you would want to put an element around each item, otherwise you end up with just a string of digits: 另外，您可能希望在每个项目周围放置一个元素，否则最终只会得到一串数字：

function createTable(nn) {
  var str = '';
  for(var i = 1; i <= 10; i++) { 
    str += '<div>' + (nn * i) + '</div>';
  }
  document.getElementById("t1").innerHTML = str;
}

Demo: 演示：

 function createTable(nn) { var str = ''; for(var i = 1; i <= 10; i++) { str += '<div>' + (nn * i) + '</div>'; } document.getElementById("t1").innerHTML = str; } function getValue() { var m = document.getElementsByName("num")[0].value; return Number(m); }

 <h1><center>Assignment No.4</center></h1> <h4><center>Please Enter Number for Table and press the button</center><h4> <form> <center><input type="text" name="num" size=10></center><br /> <center><button type="button" onclick="createTable(getValue())">Calculate</button></center> </form> <center><p id="t1"></p></center>

Javascript：即使使用parseInt（）函数，为什么我仍会得到NaN？

问题描述

3 个解决方案

解决方案1
2 2015-08-02 09:53:48

解决方案2
0 已采纳 2015-08-02 09:42:30

解决方案3
0 2015-08-02 10:18:24

Javascript：即使使用parseInt（）函数，为什么我仍会得到NaN？

问题描述

3 个解决方案

解决方案1 2 2015-08-02 09:53:48

解决方案2 0 已采纳 2015-08-02 09:42:30

解决方案3 0 2015-08-02 10:18:24

解决方案1
2 2015-08-02 09:53:48

解决方案2
0 已采纳 2015-08-02 09:42:30

解决方案3
0 2015-08-02 10:18:24