CODEWITHSUNDEEP
javascriptnanparseint
Rehan Mehdi
Rehan Mehdi

Reputation: 3

Javascript: why am i getting NaN even after using parseInt() function?

I want to create a HTML page that can do the following tasks:

  1. Take a number from the user
  2. 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>

Upvotes: 0

Views: 1305

Answers (3)

Jaromanda X
Jaromanda X

Reputation: 1

There's no mystery

m = "num".value;

here, m = undefined, because the string "num" has no property called value, i.e. 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

Upvotes: 2

Guffa
Guffa

Reputation: 700192

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. I.e. '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>

Upvotes: 0

Paresh Gami
Paresh Gami

Reputation: 4782

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>

Upvotes: 0

Related Questions