Javascript random generation

Question

I'm trying to make the td and tr do a random number of columns and and rows when the window is refreshed. I am not sure what I am doing wrong with the math here. I haven't use this function before so I know something is not right.

 <!DOCTYPE html>
<html onmousedown='event.preventDefault();'>
 <head>
 <title> Boxes </title>
 <meta charset='utf-8'>
 <style>

table {
   border-spacing: 6px;
   border: 1px rgb(#CCC);
   margin-top: .5in;
   margin-left: 1in;
 }




   td {
  width: 40px; height: 40px; 
  border: 1px solid black;
  cursor: pointer;
  }



 </style>
 <script>

This function returns a random value between min and max inclusive.

  function R(min, max) {
   var range = Math.abs(max-min)+1;
    return Math.floor((Math.random()*range) + min);
  }
  </script>
 </head>
 <body>
  <table>
  <tbody>
 <tr>
  <td>  <td>  <td>  <td> 
 <tr>
  <td>  <td>  <td>  <td> 
 <tr>
  <td>  <td>  <td>  <td> 
  <tr>
  <td>  <td>  <td>  <td> 
  <script>

Use document.write() and for-loops to make a rows x cols table of empty cells styled according to the rules in the style section. rows and cols should be set to a random number between 4 and 16. Each time the page is re-loaded the table should likely be a different size.

 for(r=4; r<16; r++){
  var row ="td";
 for(c=4; c<16;c++){
  row+="tr";
  }console.log(row);
  }


 </script>
 </tbody>
  </table>
  </body>
   </html>

I failed to. I should have where console.log(row); was essentially but even then my code isn't complete. — HTMLnoobcs17001, Apr 10 '17 at 16:50

SoEzPz · Answer 1 · 2017-04-07T20:37:33.797

Table with dynamic rows and columns

Working Example CodePen

var table = document.getElementsByTagName("table")[0];

var randomNum = (function(min, max){
  return function(){
    return Math.floor((Math.random() * (Math.abs(max-min)+1)) + min);
  }
}(4,16))

document.write(createTable(randomNum(), randomNum()));

function createTable(rowCt, colCt){
  var table = "<table>";
  for(var index = 0; index < rowCt; index++){
    table += createRow(colCt);
  }
  return (table + "</table>");
}

function createRow(num){
  return ("<tr>" + createColumns(num) + "</tr>")
}

function createColumns(num){
  var columns = "";
  for(var index = 0; index < num; index++){
    columns += "<td></td>";
  }
  return columns;
}

table {
  border-spacing: 6px;
  border: 1px rgb(#CCC);
  margin-top: .5in;
  margin-left: 1in;
}

td {
  width: 40px; height: 40px; 
  border: 1px solid black;
  cursor: pointer;
  }

<table></table>

I have been working on this myself and like you guys pointed out I went wrong with not using the document.write() it seems that it is impossible to find an example that uses the document.write for more than just simple text writing. I didn't know the write could be used like this. Thanks for your help!!! — HTMLnoobcs17001, Apr 10 '17 at 16:29

Yogesh Mistry · Answer 2 · 2017-04-07T18:59:23.773

Your R() function is generating a random number between the passed params. What you were doing is that you were not using that random number to print out the random number of rows / cols.

I've created a function called generateRandomSizedTable, and wrapped your snippet, with corrections, to print out random set of rows and columns and wrap it with a wrapper block called table_wrapper on document.onload.

function R(min, max) {
   var range = Math.abs(max-min)+1;
    return Math.floor((Math.random()*range) + min);
}

function generateRandomSizedTable(){
  var table = "<table>";
  var rows = R(4, 16);
  var cols = R(4, 16);
  for(r=1; r <= rows; r++){
      table += "<tr>";
      for(c=1; c <= cols;c++){
          table+="<td></td>";
      }
      table += "</tr>";
  }
  table += "</table>";
  document.getElementById("table_wrapper").innerHTML = table;
  console.log(table);
}

document.onload = generateRandomSizedTable();

table {
   border-spacing: 6px;
   border: 1px rgb(#CCC);
   margin-top: .5in;
   margin-left: 1in;
}
td {
   width: 40px; height: 40px; 
   border: 1px solid black;
   cursor: pointer;
}

<div id="table_wrapper"></div>

And how does your code work? What benefits does it offer? What was the problem with the OP's code, where did it go wrong? Why should he "*try this*"? — David Thomas, Apr 07 '17 at 18:39
actually i forgot to add comments with my answer due to slow connection and opening up the snippet insertor after lot of efforts. i'll put my points in a minute — Yogesh Mistry, Apr 07 '17 at 18:53
@DavidThomas Thanks for pointing out the mistake. You may improve the answer now if you find it lacking somewhere. — Yogesh Mistry, Apr 07 '17 at 19:01

score 0 · Accepted Answer · edited May 23 '17 at 12:02

0

Here in example, i have added the script directly within body to append the required HTML to keep it simple

About your code : well,in your posted snippet you were using console.log() which is used for writing the output to console not on your web page in order to do so you have to add it to Document object (your page) a simple method is to use

document.write('markup here');

follow this link to know about the write method.

about how rows and cols generated ie. Math.random() * (max - min) + min here is some best explanation

table {
      border-spacing: 6px;
      border: 1px rgb(#CCC);
    }

td {
    width: 20px; height: 40px; 
    border: 1px solid black;
    cursor: pointer;
  }

<table border="1">
    <script type="text/javascript">
      //Lets first Set Min and max here you want min to 4 and max to 16 so we declare here.
      var min = 4, max =16;
      var row = Math.random() * (max - min) + min;
      var cols = Math.random() * (max - min) + min;
      //lets print someoutput
      for(var i=0;i<row;i++)
      {
        document.write("</tr>"); // we are printing HTML so use tags <tr> not tr
        for(var j=0;j<cols;j++)
        {
          document.write("<td>dummy</td>"); // we are printing HTML so use tags <td> not td
        }
        document.write("</tr>");
      }
  </script>
</table>

edited May 23 '17 at 12:02

Community

1
1

answered Apr 07 '17 at 18:27

RohitS

1,036
12
17

Are your double colons deliberate? And how does this code work, what benefits does it offer over the OP's original code? What was wrong with that original code? – David Thomas Apr 07 '17 at 18:41
@DavidThomas did you wait for answerer to update....nd double colons were typos and i guess the update should help the OP.. still anything left please point dont just downvote... – RohitS Apr 07 '17 at 18:43
1

This is a great example!!! This is how I think it should look! I really appreciate the comments. As I said above I have been spending time offline trying to get this to work. The document.write was my missing puzzle piece. – HTMLnoobcs17001 Apr 10 '17 at 16:37
@RohitS I don't understand what the for loop variables actually do here for(var i=0;i – HTMLnoobcs17001 Apr 10 '17 at 16:57
@LarryG glad it helped you.. :D now,moving to your question, the loops are for printing the output. first we calculate the rows and columns required with `Math.random() * (max - min) + min;` now have to print the output for number of rows and for each rows the number of columns so outer loop decides number of rows and for each row (i.e i) we have inner loop of j which prints columns.. i hope that make sense to you – RohitS Apr 10 '17 at 17:42
1

Definitely does help me! Thanks again! – HTMLnoobcs17001 Apr 10 '17 at 20:51

Javascript random generation

3 Answers3