Question

我是一个javascript新手。我一直试图完成这项任务，但却无法看到我的错误在哪里，而且是在午夜之前。任何帮助，将不胜感激！这些是说明：

创建以重定向到已完成表格的按钮开头的网页。生成的表是一个3×4表，每个单元格都有一个数学问题。数学问题将使用1到20之间的随机数。问题将使用4种操作中的一种：加法，减法，乘法或除法也是随机生成的。我必须使用以下功能：

function buildIt（）

function buildTable（rows，cols）

函数randOne（）

函数randTwo（）

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Random Math Table Generator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type = "text/javascript">
function buildIt()
{
//function to call buildTable setting the values for the //rows and columns the table
var rows; var cols; var i; var j; 
buildTable(rows, cols);
}
function buildTable(rows, cols)
{ 
//function to build actual table
//include for loop in which next two functions are called
document.write("<div id='content'><p>&nbsp;</p>");
document.write("<table width = '60%' border = '1' align = 'center' cellpadding = '5' cellspacing = '5'>");
ranNum = (rows + 1) * (cols + 1);
for (i = 0; i < rows; i++)
{
document.write("<tr>");
for (j = 0; j < cols; j++)
{
document.write("</tr>");
}
document.write("</table> </div>");
}
function randOne(min, max)
{
//function to generate random number between 1 and 20
var randNumOne = return Math.floor(Math.random() * 21);
var randNumTwo = return Math.floor(Math.random() * 21);
}
function randTwo()
{
//function to generate the specified operations randomly
var cellContents;
switch(randOp){
case "+": answerNumb = randNumOne + randNumTwo; break;
case "-": answerNumb = randNumOne - randNumTwo; break;
case "÷": answerNumb = randNumOne / randNumTwo; break;
case "x": answerNumb = randNumOne * randNumTwo; break;
}
cellContents = randNumOne + operation + randNumTwo;
}
}
</script>
</head>
<body>
<div id="container">
<h1 id="logo">Table Builder</h1>
<p><input type ="button" onclick="buildIt()" value = "Build a table"></p>
</div>
</body>
</html>

Answer 1

下面没有回答，但有些提示将帮助您完成此任务以及将来的任务。

使用document.createElement而不是document.write HTML对象比仅仅在屏幕上打印文本并希望获得最佳效果更容易管理即：
var table = document.createElement('table');
document.body.appendChild(table);
使用CSS代替样式而不是HTML属性 table.style.width = "60%";
table.style.border = "1px solid black";
要为变量指定新值，您无需重新声明它。
var randNumOne = Math.floor(Math.random() * 21); randNumOne = Math.floor(Math.random() * 21)

另一个重要概念是范围
当您在{}中编写代码时，您将创建一个新的代码块每个代码块都有自己的范围在{}块之外编写的代码放在全局范围内如果在块1中声明一个变量，然后调用一个未在块1中声明的函数。该函数将无法访问该变量。

var test = 'outside';
function block1() {
  var test = 'inside block 1';
  var block3 = function() {
    alert(test);
  }
  block3(); // Will output inside block 1.
  block2(); // Will output outside.
}
function block2() {
  alert(test);
}
block1();

您的代码中也存在各种语法错误。 @ tieson-t已经提到了它，但你可以使用Chrome，Firefox，Safari甚至IE中的开发者工具。

浏览您的代码我可以看到以下错误：
*使用未定义的变量（rows，cols，randOp ......） *使用保留命令不合适（返回）

Answer 2

首先，让我们为代码应用一个标准的缩进模式，很多编辑都会为你做这些，以及一些格式化：

function buildIt() {
    //function to call buildTable setting the values for the //rows and columns the table
    var rows; var cols; var i; var j; 
    buildTable(rows, cols);
}

function buildTable(rows, cols) { 
    //function to build actual table
    //include for loop in which next two functions are called
    document.write("<div id='content'><p>&nbsp;</p>");
    document.write("<table width='60%' border='1' align='center' " + 
                   "cellpadding='5' cellspacing='5'>");
    ranNum = (rows + 1) * (cols + 1);
    for (i = 0; i < rows; i++) {
        document.write("<tr>");
        for (j = 0; j < cols; j++) {
            document.write("</tr>");
        }
        document.write("</table> </div>");
    }

    function randOne(min, max) {
        //function to generate random number between 1 and 20
        var randNumOne = return Math.floor(Math.random() * 21);
        var randNumTwo = return Math.floor(Math.random() * 21);
    }

    function randTwo() {
        //function to generate the specified operations randomly
        var cellContents;
        switch(randOp) {
          case "+": answerNumb = randNumOne + randNumTwo; break;
          case "-": answerNumb = randNumOne - randNumTwo; break;
          case "÷": answerNumb = randNumOne / randNumTwo; break;
          case "x": answerNumb = randNumOne * randNumTwo; break;
        }
        cellContents = randNumOne + operation + randNumTwo;
    }
}

因此，我们可以看到变量rows，cols，i和j当前包含在buildIt函数中。所有var语句在函数级别的函数（对象）内创建变量。这些变量只能在函数内部访问，或者通过执行fName.varName。

另请注意，函数通常起到类似数学函数的作用。如果我定义一个函数cosine，我可以这样写：

function cosine(x) {
    var resultValue = Math.cos(x);
}

但是虽然resultValue包含正确的值，但它只是留在cosine内。为了再次获得价值，我们通常会return：

function cosine(x) {
    var resultValue = Math.cos(x);
    return resultValue;
}

所以我希望你的代码结构更像这样：

function buildIt() {
    var rows = 3;
    var cols = 4;
    document.getElementById('gridDiv').innerHTML = buildTable(rows, cols);
}

这里，buildIt调用buildTable，并将结果传递给id为gridDiv的div的innerHTML属性。然后，buildTable可能只关心构建一个HTML字符串，而不是负责将它放在哪里。

因为buildTable只是创建一个字符串，所以我会让randOne返回一个数字，然后randTwo返回一个字符串：

function randOne() {
    //function to generate random number between 1 and 20
    return Math.floor(Math.random() * 21);
}

注意return是函数中执行的最后一个语句;语句是return someValue，然后它停止处理函数。

所以将字符串从单个随机数构建到包含数学语句的字符串到整个html表;循环遍历行和列以创建单元格，然后是行，然后是整个表格，然后将其传回以在正确的位置进行设置。

我的建议是使用jsbin.com或jsfiddle.com来编写它，并使最小的函数按照你想要的方式工作。例如，在其中一个站点中打开Console（它只是一个交互式javascript窗口）并粘贴上面的randOne定义，然后键入randOne（）来调用它。

javascript onclick按钮生成随机算术问题表

2 个答案: