Question

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

从用户那里取一个号码
计算乘法表并将其显示在计算按钮

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

但我收到NaN错误，并且还需要帮助如何在同一页面上显示这样的表格，请帮助并承担我的新手错误:-)

＆＃13;

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

＆＃13;

Answer 1

没有神秘感

m = "num".value;

这里，m =未定义，因为字符串“num”没有名为value的属性，即它是undefined

n = Number(m);

Number（undefined）=== NaN - 因为undefined不是数字

编辑：你的onclick也像这样调用 - createTable（'n'）

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

Answer 2

你的程序遇到一些问题只看到这个

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

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

此代码：

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

当页面加载时执行

，这样在用户有机会输入任何数字之前。它不使用用户可以输入数字的字段，它只使用字符串"num"。由于字符串不是输入元素，因此它没有名为value的属性，因此m获取值undefined。将其转换为数字会为您提供NaN，但这甚至不是您在输出中获得的NaN，因为永远不会使用n的值。

此代码：

onclick="createTable('n')"

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

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

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

当用户单击该按钮时，调用该函数以获取该值并将其发送到创建该表的函数：

onclick="createTable(getValue())"

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

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？

3 个答案: