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

【问题标题】：javascript onclick button generates table of random arithmetic problemsjavascript onclick按钮生成随机算术问题表
【发布时间】：2014-12-10 00:38:15
【问题描述】：

我是一个 JavaScript 新手。我一直在努力完成这项任务，但就是看不出我的错误在哪里，而且它应该在午夜前完成。任何帮助，将不胜感激！这些是说明：

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

函数 buildIt()

函数 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>

【问题讨论】：

F12 键通常会在大多数浏览器中打开开发者控制台。从那里开始。

标签： javascript math button random onclick

【解决方案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...） * 使用不适当的保留命令（返回）

【讨论】：

感谢您的帮助！我将再次查看代码。我将扔掉我的教科书并购买 Javascript 权威指南。希望随着时间的推移和使用，我最终会得到它，但是当事情并不容易时，它肯定会令人沮丧。
在你扔书和买新书之前，我推荐W3Schools。
我使用 The Online Lint 在第 42 行查找语法错误，但我会尝试开发者工具。
@Eyal：不是 w3schools！这是非常基本的，不是最新的。使用 Mozilla 开发者网络：developer.mozilla.org/en-US

【解决方案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 来编写它，并首先让最小的函数按照你的意愿工作。例如，在其中一个站点中打开控制台（只是一个交互式 javascript 窗口）并粘贴上面的 randOne 定义，然后通过键入 randOne() 调用它。

【讨论】：

感谢分享！我一定会查看您提到的网站。我重新编写了我的代码，所以函数现在可以工作了。我应该编辑线程。我意识到我的第一个错误是没有结束我的评论。如此简单以至于我忽略了的事情。