Javascript: why am i getting NaN even after using parseInt() function?
Question
I want to create a HTML page that can do the following tasks:
- 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:
5
10
15
20
25
30
35
40
45
50
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 :-)
<!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>
3 answers
solution1
2 2015-08-02 09:53:48
There's no mystery
m = "num".value;
here, m = undefined, because the string "num" has no property called value , ie it's undefined
n = Number(m);
Number(undefined) === NaN - because undefined is not a number
edit: also your onclick is called like this - createTable('n')
same problem, 'n' is not a number, it's a string .. 'n' * anything == NaN
solution2
0 ACCPTED 2015-08-02 09:42:30
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>
solution3
0 2015-08-02 10:18:24
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" . As the string isn't the input element, it doesn't have a property named value , so m gets the value 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.
This code:
onclick="createTable('n')"
doesn't use the variable n , it uses the string '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. Ie 'n' * i results in 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:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.