Javascript：为什么我在使用 parseInt() 函数后仍然得到 NaN？

Question

我想创建一个可以执行以下任务的 HTML 页面：

从用户那里取号
计算乘法table并将其显示在计算按钮下方

乘法的格式table应该是这样的，但是在同一页上计算按钮下面：

但是我遇到了 NaN 错误，并且还需要有关如何在同一页面上像这样显示 table 的帮助，请帮助并容忍我的新手错误:-)

<!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

你的程序有问题，看看这个

<!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 2

没有什么神秘的

m = "num".value;

这里，m = undefined，因为字符串"num"没有属性叫value，即undefined

n = Number(m);

Number(undefined) === NaN - 因为 undefined 不是数字

编辑：您的 onclick 也是这样调用的 - createTable('n')

同样的问题，'n' 不是一个数字，它是一个字符串.. 'n' * anything == NaN

Answer 3

您正在将值转换为数字，但时间不对，而且是错误的值。然后你甚至不使用结果。

此代码：

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

在页面加载时执行，所以那是在用户有机会输入任何数字之前。它不使用用户可以输入数字的字段，它只使用字符串 "num"。由于字符串不是输入元素，它没有名为 value 的属性，因此 m 获得值 undefined。将其转换为数字会得到 NaN，但这甚至不是您在输出中获得的 NaN，因为从未使用过 n 的值。

此代码：

onclick="createTable('n')"

不使用变量 n，它使用字符串 'n'。这就是输出中 NaN 的原因，因为这是您尝试在乘法中使用字符串时得到的结果。 IE。 'n' * i 结果为 NaN。

要获取用户输入的值，您应该在用户单击按钮时获取它。将代码放在一个函数中，以便您可以在那个时候调用它。使用getElementsByName方法定位元素：

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

当用户点击按钮时，调用函数获取值并将其发送给创建table的函数：

onclick="createTable(getValue())"

在您创建 table 的代码中，您应该将这些项目放在一起，然后将它们放在页面中。如果将每个项目都放入元素中，它们将相互替换，最终只会得到最后一个。此外，您可能希望在每个项目周围放置一个元素，否则您最终只会得到一串数字：

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

演示：

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？

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

javascript

nan

parseint