Home javascript Create a 20x20 div grid using javascript

Create a 20×20 div grid using javascript

Author

Date

Category

What can you do with this code to create a mesh? You can also add your own, more correct code for this solution to this problem

& lt;! DOCTYPE html & gt;
& lt; html & gt;
 & lt; head & gt;
  & lt; meta charset = "utf-8" & gt;
  & lt; title & gt; JavaScript game & lt; / title & gt;
  & lt; style & gt;
  .elem {
   width: 25px;
   height: 25px;
   border: 1px solid green;
   display: inline-block;
  }
  & lt; / style & gt;
 & lt; / head & gt;
 & lt; body onLoad = "clone ()" & gt;
  & lt; div id = "parent" & gt;
   & lt; div class = "elem" & gt; & lt; / div & gt;
  & lt; / div & gt;
  & lt; script & gt;
  for (var i = 1; i & lt; 15; i ++) {
   clone (i);
  };
  function clone () {
   var parent = document.getElementById ('parent');
   var elem = parent.querySelector ('. elem');
   var clone = elem.cloneNode (true);
   parent.appendChild (clone);
  }
  & lt; / script & gt;
   & lt; / body & gt;
  & lt; / html & gt;


Answer 1, authority 100%

Here is a small implementation on a div using 2 loops:

for (var i = 0; i & lt; 20; i ++) {
 var row = createRow ();
 for (var k = 0; k & lt; 20; k ++) {
  createElement (row);
 };
};
function createRow () {
 var parent = document.getElementById ('parent');
 var row = document.createElement ('div');
 row.className = "row";
 parent.appendChild (row);
 return row;
}
function createElement (parent) {
var elem = document.createElement ('div');
 elem.className = "elem";
 parent.appendChild (elem);
} 
# parent {
 display: flex;
 flex-direction: column;
}
.row {
 height: 27px;
}
.elem {
 width: 25px;
 height: 25px;
 border: 1px solid green;
 display: inline-block;
} 
& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
 & lt; meta charset = "utf-8" & gt;
 & lt; title & gt; JavaScript game & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
 & lt; div id = "parent" & gt;
 & lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt; 

Answer 2, authority 67%

document.body.innerHTML = (
 "& lt; div class = r & gt;" +
  "& lt; div class = c & gt; & lt; / div & gt;". repeat (20) +
 "& lt; / div & gt;"
) .repeat (20) 
* {
 box-sizing: border-box;
}
body {
 margin: 0;
 display: table;
 width: 100%;
 table-layout: fixed;
 border-collapse: collapse;
}
.r {
 display: table-row;
}
.c {
 display: table-cell;
}
body, div {
 border: 1px solid;
}
.c: before {
 content: "";
 float: left;
 padding-top: 100%;
} 

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions