将函数从数组调用到表中

时间:2013-03-28 00:19:37

标签: javascript html arrays function random

我试图调用几个包含简单数学问题的函数,使用随机数到数组然后进入表。我想我很接近,我只是不确定如何写表。我有如下:

HTML:                     

</head>
<body>
<div>
    <table id="content">
    </table>
</div>
</body>
</html>

SCRIPT:

function RandX(){

var x = Math.floor(Math.random()*300);
}

function RandY(){                       
var y = Math.floor(Math.random()*300);
}



var math1 = function(x,y) {return x * y;};  
var math2 = function(x,y) {return x + 1;};
var math3 = function(x,y) {return x/y;};
var math4 = function(x,y) {return x % y;};
var math5 = function(x,y) {return math.sqrt(x^2 + y^2);};
var math6 = function(x,y) {return x^2;};
var math7 = function(x,y) {return (10*x) + (y/2);};
var math8 = function(x,y) {return SIGMA)

var maths = [];

maths.push(math1);
maths.push(math2);
maths.push(math3);
maths.push(math4);
maths.push(math5);
maths.push(math6);
maths.push(math7);
maths.push(math8);
//maths[0](RandX,2);//return RandX* RandY
//maths[1](3,4);//12 - put random numbners here?



 var c = document.getElementById("Content");
 var content = document.createElement("tr");
 for( var i = 0; i < maths.length; i++ ){
  var d = document.createElement("<td>" + "</td>);
  d.innerHTML = "<td>" + maths[0](RandX(), RandY()) + "</td>"; 
  content.appendChild(d);
 }
 c.appendChild(content);

谢谢!

4 个答案:

答案 0 :(得分:0)

您可以遍历这些项目并将它们添加到表中,如下所示:

var contentDiv = document.getElementById("Content");
var row = document.createElement("tr");
for( var i = 0; i < maths.length; i++ ){
    var cell = document.createElement("td");
    cell.innerHTML = maths[i]; 
    content.appendChild(cell);
}
contentDiv.appendChild(content);

答案 1 :(得分:0)

脚本中有一些错误 - 这是正确的错误:

http://jsfiddle.net/wMF5M/

function RandX(){
var x = Math.floor(Math.random()*300);
    return x;
}

function RandY(){                       
var y = Math.floor(Math.random()*300);
    return y;
}

var math1 = function(x,y) {return x * y;};  
var math2 = function(x,y) {return x + 1;};
var math3 = function(x,y) {return x/y;};
var math4 = function(x,y) {return x % y;};
var math5 = function(x,y) {return math.sqrt(x^2 + y^2);};
var math6 = function(x,y) {return x^2;};
var math7 = function(x,y) {return (10*x) + (y/2);};
var math8 = function(x,y) {return SIGMA;}

var maths = [];

maths.push(math1);
maths.push(math2);
maths.push(math3);
maths.push(math4);
maths.push(math5);
maths.push(math6);
maths.push(math7);
maths.push(math8);
//maths[0](RandX,2);//return RandX* RandY
//maths[1](3,4);//12 - put random numbners here?



 var content = document.getElementById("content");
 var tr = document.createElement("tr");
 for( var i = 0; i < maths.length; i++ ){
  var td = document.createElement('td');
  td.innerHTML =  + maths[0](RandX(), RandY());
  tr.appendChild(td);
 }
 content.appendChild(tr);

答案 2 :(得分:0)

这些函数需要返回一个值。由于除了名称之外它们是相同的,因此在两个函数中似乎没有多大意义:

function RandX(){
  return Math.floor(Math.random()*300);
}

function RandY(){                       
  return Math.floor(Math.random()*300);
}

分配给变量,然后推入数组的函数可以简单地在数组文字中分配:

var maths = [
    function(x,y) {return x * y;},
    function(x,y) {return x + 1;},
    function(x,y) {return x/y;},
    function(x,y) {return x % y;},
    function(x,y) {return math.sqrt(x^2 + y^2);},
    function(x,y) {return x^2;},
    function(x,y) {return (10*x) + (y/2);},
    function(x,y) {return SIGMA)
];

 var c = document.getElementById("Content");
 var content = document.createElement("tr");
 for( var i = 0; i < maths.length; i++ ){

   // The argument for createElement is the tagname, not markup
   var d = document.createElement('td');

您不能将TD指定为TD的内容。因为这只是文本,所以最好创建一个文本节点并插入它。此外,您希望每次都调用不同的函数,因此请使用i

   d.appendChild(document.createTextNode(maths[i](RandX(), RandY()))); 
 }

// In IE, you must append rows to a table section element, (thead, tfoot or tbody):
c.tBodies[0].appendChild(content);

HTH。

答案 3 :(得分:0)

我希望这有帮助!

http://jsfiddle.net/Jra9w/1/

//You don't need 2 different functions to execute the same logic, so here
//RandX and RandY are combined into randNum
function randNum() {

    return Math.floor(Math.random() * 300);

}

//Instead of instanciating the array and then pushing the functions into 
//it you can instanciate the array already initialized with a set of items.
var maths = [
        function (x, y) { return x * y; },
        function (x, y) { return x + 1; },
        function (x, y) { return x / y; },
        function (x, y) { return x * y; },
        function (x, y) { return Math.sqrt(x^2 + y^2); },
        function (x, y) { return x^2; },
        function (x, y) { return (10 * x) + (y / 2); },
        function (x, y) { 
            //SIGMA is not defined in your code and I am
            //not sure what you want to do in here. This function will throw
            //an error if you try to return the undeclared SIGMA variable

            //return SIGMA;
        }
    ],
    i = 0,
    len = maths.length,

    //JavaScript is a case-sensitive language so you must write the id exactly as defined
    //in the id attribute of the html element
    tableElement = document.getElementById('content'),
    results = [];

//Note that we have cached the maths.length result into the 'len' variable instead of
//putting it directly into the loop condition. The reason for this is that the condition //will be evaluated on each iterations and property lookups are expensive in JavaScript, so 
//we try to reduce them.

for (; i < len; i++) {
    //we push all the results into a new array
    results.push(maths[i](randNum(), randNum()));
}

//Array.join is faster for concatenating strings that using the + operator when you want to 
//concatenate a lot of strings together.
tableElement.innerHTML = '<tr><td>' + results.join('</td><td>') + '</td></tr>';

//You don't need 2 different functions to execute the same logic, so here //RandX and RandY are combined into randNum function randNum() { return Math.floor(Math.random() * 300); } //Instead of instanciating the array and then pushing the functions into //it you can instanciate the array already initialized with a set of items. var maths = [ function (x, y) { return x * y; }, function (x, y) { return x + 1; }, function (x, y) { return x / y; }, function (x, y) { return x * y; }, function (x, y) { return Math.sqrt(x^2 + y^2); }, function (x, y) { return x^2; }, function (x, y) { return (10 * x) + (y / 2); }, function (x, y) { //SIGMA is not defined in your code and I am //not sure what you want to do in here. This function will throw //an error if you try to return the undeclared SIGMA variable //return SIGMA; } ], i = 0, len = maths.length, //JavaScript is a case-sensitive language so you must write the id exactly as defined //in the id attribute of the html element tableElement = document.getElementById('content'), results = []; //Note that we have cached the maths.length result into the 'len' variable instead of //putting it directly into the loop condition. The reason for this is that the condition //will be evaluated on each iterations and property lookups are expensive in JavaScript, so //we try to reduce them. for (; i < len; i++) { //we push all the results into a new array results.push(maths[i](randNum(), randNum())); } //Array.join is faster for concatenating strings that using the + operator when you want to //concatenate a lot of strings together. tableElement.innerHTML = '<tr><td>' + results.join('</td><td>') + '</td></tr>';