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
– HTMLnoobcs17001, Commented Apr 10, 2017 at 16:50

SoEzPz · Accepted Answer · 2017-04-07 20:37:33Z

2

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>

edited Apr 7, 2017 at 20:37

answered Apr 7, 2017 at 19:23

SoEzPz

16k8 gold badges64 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HTMLnoobcs17001 Over a year ago

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

Community · Accepted Answer · 2017-05-23 12:02:27Z

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, 2017 at 12:02

CommunityBot

11 silver badge

answered Apr 7, 2017 at 18:27

RohitS

1,04612 silver badges17 bronze badges

6 Comments

David Thomas Over a year ago

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?

RohitS Over a year ago

@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...

HTMLnoobcs17001 Over a year ago

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 Over a year ago

@RohitS I don't understand what the for loop variables actually do here for(var i=0;i<row;i++) same goes for j.

HTMLnoobcs17001 Over a year ago

Definitely does help me! Thanks again!

|

Yogesh Mistry · Accepted Answer · 2017-04-07 18:59:23Z

0

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>

edited Apr 7, 2017 at 18:59

answered Apr 7, 2017 at 18:20

Yogesh Mistry

2,17217 silver badges20 bronze badges

3 Comments

David Thomas Over a year ago

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"?

Yogesh Mistry Over a year ago

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 Over a year ago

@DavidThomas Thanks for pointing out the mistake. You may improve the answer now if you find it lacking somewhere.

Collectives™ on Stack Overflow

Javascript random generation

3 Answers 3

1 Comment

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related