I am trying to create a pattern of 5 rows of div tags using for loops in javascript. The first row should have 1 div, the second 2 divs and so on until there the last row has 5 divs. What I currently end up with is 1 row of 15 divs.
<script>
for (var i = 0; i < 5; i++) {
for(var j = 0; j <= i; j++) {
var div = document.createElement("div");
document.body.appendChild(div);
}
var p = document.createElement("p");
document.body.appendChild(p);
}
</script>
CSS
<style>
div {
width: 20px;
height: 20px;
border: 1px solid black;
display: inline-block;
position: relative;
float: left;
}
</style>
You can simply consider br tag to create the separation and no need to use float because you will have to clear it after each row:
for (var i = 0; i < 5; i++) {
for (var j = 0; j <= i; j++) {
var div = document.createElement("div");
div.classList.add('box');
document.body.appendChild(div);
}
var br = document.createElement("br");
document.body.appendChild(br);
}
div.box {
width: 20px;
height: 20px;
border: 1px solid black;
display: inline-block;
}
With float you will need something like this:
for (var i = 0; i < 5; i++) {
for (var j = 0; j <= i; j++) {
var div = document.createElement("div");
div.classList.add('box');
document.body.appendChild(div);
}
var br = document.createElement("br");
document.body.appendChild(br);
}
div.box {
width: 20px;
height: 20px;
border: 1px solid black;
float:left;
}
br {
clear:both; /*This is mandatory !!*/
}
Or like this:
for (var i = 0; i < 5; i++) {
var p = document.createElement("div"); /*Create the row*/
p.classList.add('clear'); /*add the clear class*/
for (var j = 0; j <= i; j++) {
var div = document.createElement("div");
div.classList.add('box');
p.appendChild(div); /*Append blocks to the row and not the body*/
}
document.body.appendChild(p); /*Append the row to the body */
}
div.box {
width: 20px;
height: 20px;
border: 1px solid black;
float:left;
}
div.clear {
clear:both; /*This is mandatory !!*/
}
Related
This question already has answers here:
How to addEventListener to multiple elements in a single line
(15 answers)
Closed 1 year ago.
So basically I have functions that creates a grid.
When I hover over a particular cell I want the cell to be filled black. But the fill should remain in the cell after the hover.
How do I do that using JS?
I'm new to JS and this is my first time asking a programming related question so I apologize if my question is not clear enough.
const container = document.querySelector('#container');
let rows = document.getElementsByClassName('grid-row');
let cells = document.getElementsByClassName('grid-column');
defaultGrid();
function defaultGrid() {
createRow(18);
createColumn(18);
}
function createRow(rowNum) {
for (let i = 0; i < rowNum; i++) {
let row = document.createElement('div');
container.appendChild(row).className = 'grid-row';
}
}
function createColumn(cellNum) {
for (let i = 0; i < rows.length; i++) {
for (let j = 0; j < cellNum; j++) {
let newCell = document.createElement('div');
rows[j].appendChild(newCell).className = 'grid-column';
}
}
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.grid-column {
display: inline-block;
border: 1px solid black;
min-height: 20px;
min-width: 20px;
margin-left: 2px;
margin-top: 2px;
}
#container {
border: 5px solid chartreuse;
}
.fill {
background: black;
}
<h2>test</h2>
<div id="container">
</div>
Like this:
Delegate from the container
Test the target
I use mouseover for the delegation and add your already defined class that way there is no need to add eventlisteners to each cell
container.addEventListener("mouseover",function(e) {
const tgt = e.target;
if (tgt.classList.contains("grid-column")) tgt.classList.add("fill")
})
const container = document.querySelector('#container');
let rows = document.getElementsByClassName('grid-row');
let cells = document.getElementsByClassName('grid-column');
defaultGrid();
function defaultGrid() {
createRow(18);
createColumn(18);
}
function createRow(rowNum) {
for (let i = 0; i < rowNum; i++) {
let row = document.createElement('div');
container.appendChild(row).className = 'grid-row';
}
}
function createColumn(cellNum) {
for (let i = 0; i < rows.length; i++) {
for (let j = 0; j < cellNum; j++) {
let newCell = document.createElement('div');
rows[j].appendChild(newCell).className = 'grid-column';
}
}
}
container.addEventListener("mouseover",function(e) {
const tgt = e.target;
if (tgt.classList.contains("grid-column")) tgt.classList.add("fill")
})
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.grid-column {
display: inline-block;
border: 1px solid black;
min-height: 20px;
min-width: 20px;
margin-left: 2px;
margin-top: 2px;
}
#container {
border: 5px solid chartreuse;
}
.fill {
background: black;
}
<h2>test</h2>
<div id="container">
</div>
Since you already declared a fill class, just need to add this line to your createColumn function.
function createColumn(cellNum) {
for (let i = 0; i < rows.length; i++) {
for (let j = 0; j < cellNum; j++) {
let newCell = document.createElement('div');
newCell.onmouseenter = () => newCell.classList.add("fill"); ----> Add this line
rows[j].appendChild(newCell).className = 'grid-column';
}
}
}
This will append the class name to the cell element.
Add the event listener to your cell creation loop:
const container = document.querySelector('#container');
let rows = document.getElementsByClassName('grid-row');
let cells = document.getElementsByClassName('grid-column');
defaultGrid();
function defaultGrid() {
createRow(18);
createColumn(18);
}
function createRow(rowNum) {
for (let i = 0; i < rowNum; i++) {
let row = document.createElement('div');
container.appendChild(row).className = 'grid-row';
}
}
function createColumn(cellNum) {
for (let i = 0; i < rows.length; i++) {
for (let j = 0; j < cellNum; j++) {
let newCell = document.createElement('div');
/**
* add eventlistener
*/
newCell.addEventListener('mouseover',function() {
newCell.classList.add('fill');
});
rows[j].appendChild(newCell).className = 'grid-column';
}
}
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.grid-column {
display: inline-block;
border: 1px solid black;
min-height: 20px;
min-width: 20px;
margin-left: 2px;
margin-top: 2px;
}
#container {
border: 5px solid chartreuse;
}
.fill {
background: black;
}
<h2>test</h2>
<div id="container">
</div>
I am trying to crrate a chessboard using HTML and JS. I'm using HTML tables for that purpose. but I'm not sure why but there is are empty spaces around each cells.
I've tried cell-spacing:0; but it doesn't seems to work.\
see the red background around cells.
Here is the code
var table = document.createElement("table");
table.id = "board";
table.classList.add = "div2";
for (var i = 1; i < 9; i++) {
var tr = document.createElement('tr');
for (var j = 1; j < 9; j++) {
var td = document.createElement('td');
if (i % 2 == j % 2) {
td.className = "white";
} else {
td.className = "black";
}
tr.appendChild(td);
td.innerHTML += td.cellIndex + 1;
}
table.appendChild(tr);
}
document.body.appendChild(table);
* {
margin: 0;
padding: 0;
}
body {
background: red;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
overflow: scroll;
}
.black {
background: #769656;
}
.white {
background: #eeeed2;
}
table {
border: 2px solid red;
width: 95vw;
cell-spacing: 0;
cell-padding: 0;
height: 95vw;
}
.div2 {
width: 95vw;
height: 95vw;
}
I'm prefering javascript or css solutions to this. Thanks.
Set table.cellSpacing = 0; before adding the table to the document :
var table = document.createElement("table");
table.id = "board";
table.cellSpacing = 0;
table.classList.add = "div2";
for (var i = 1; i < 9; i++) {
var tr = document.createElement('tr');
for (var j = 1; j < 9; j++) {
var td = document.createElement('td');
if (i % 2 == j % 2) {
td.className = "white";
} else {
td.className = "black";
}
tr.appendChild(td);
td.innerHTML += td.cellIndex + 1;
}
table.appendChild(tr);
}
document.body.appendChild(table);
* {
margin: 0;
padding: 0;
}
body {
background: red;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
overflow: scroll;
}
.black {
background: #769656;
}
.white {
background: #eeeed2;
}
table {
border: 2px solid red;
width: 95vw;
cell-spacing: 0;
cell-padding: 0;
height: 95vw;
}
.div2 {
width: 95vw;
height: 95vw;
}
Just add border-collapse: collapse to your table CSS:
var table = document.createElement("table");
table.id = "board";
table.classList.add = "div2";
for (var i = 1; i < 9; i++) {
var tr = document.createElement('tr');
for (var j = 1; j < 9; j++) {
var td = document.createElement('td');
if (i % 2 == j % 2) {
td.className = "white";
} else {
td.className = "black";
}
tr.appendChild(td);
td.innerHTML += td.cellIndex + 1;
}
table.appendChild(tr);
}
document.body.appendChild(table);
* {
margin: 0;
padding: 0;
}
body {
background: red;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
overflow: scroll;
}
.black {
background: #769656;
}
.white {
background: #eeeed2;
}
table {
border: 2px solid red;
border-collapse: collapse;
width: 95vw;
height: 95vw;
}
td {
text-align: center;
}
.div2 {
width: 95vw;
height: 95vw;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
</body>
</html>
Trying to make a grid with user input (ex. if they put 4 in, 4X4 grid.)
But I can't seem to make my code go down to the next row after it prints the 4th 'div'.
Any help would be appreciated, been stumped for days on this!
JAVASCRIPT CODE
const container = document.querySelector('#container');
// Create boxes
function createBoxes (numBox) {
for (let i =0; i < numBox*numBox; i++){
for (let j =0; j < (numBox - 1); j++){
const square = document.createElement('div');
square.setAttribute('class', 'box');
square.style.width = '25px';
square.style.height = '25px';
container.appendChild(square);
}
}
}
createBoxes(2);
CSS CODE:
.box {
border: 1px solid red;
box-sizing: border-box;
display: inline-block;
}
.container {
width: 500px;
height: 500px;
}
HTML CODE:
<div id='container></div>
You need to
Correct your syntax for the container in the HTML; you're missing an ending '
In the outer loop, create a row to put all children inside when in the inner loop
Iterate only from 0 to numBox, then from 0 to numBox
Use CSS to give each row a set height (and use CSS for the cells as well, instead of assigning to their styles in JS)
const container = document.querySelector('#container');
function createBoxes(numBox) {
for (let i = 0; i < numBox; i++) {
const row = container.appendChild(document.createElement('div'));
for (let j = 0; j < numBox; j++) {
const square = document.createElement('div');
square.className = 'box';
row.appendChild(square);
}
}
}
createBoxes(2);
.box {
border: 1px solid red;
box-sizing: border-box;
display: inline-block;
width: 25px;
height: 25px;
}
#container {
width: 500px;
height: 500px;
}
#container>div {
height: 25px;
}
<div id='container'></div>
If you don't like the doubling up of borders, you can use nth-child to, eg, hide the left border of all cells but the first in a row, or something similar, and the same sort of thing for top or bottom borders. (Or use a table and collapse the borders)
You can use css grid when working with grid layouts. Here is one way.
Correct your html to close the quotation mark in container.
Correct your css to be #container instead of .container.
The grid will calculate the width and height of each square inside the container equally.
Javascript
const container = document.querySelector('#container');
function createBoxes(numBox){
container.style.gridTemplateColumns = `repeat(${numBox}, 1fr)`;
for(let i = 0;i < numBox*numBox;i++){
const square = document.createElement('div');
square.classList.add('box');
container.appendChild(square);
}
}
createBoxes(4);
CSS
#container{
width: 500px;
height: 500px;
background: yellow;
display: grid;
}
.box{
border: 1px solid red;
box-sizing: border-box;
}
Take it
<body>
<div id="container"></div>
<script src="./1.js"></script>
</body>
const container = document.querySelector("#container");
// Create boxes
function createBoxes(numBox) {
for (let i = 0; i < numBox; i++) {
let div = document.createElement("div");
for (let j = 0; j < numBox; j++) {
let square = document.createElement("div");
square.setAttribute("class", "box");
// square.style.width = "125px";
// square.style.height = "25px";
// square.style.border = "2px solid red";
div.append(square);
}
container.append(div);
}
}
document.onload = createBoxes(5);
.box {
border: 1px solid red;
box-sizing: border-box;
display: inline-block;
width: 125px;
height: 25px;
}
.container {
min-width: 500px;
min-height: 500px;
}
there are a bug on IE 11 when i empty the html in a DIV and I remove class in the list with JavaScriptS.
The DIV loses the syle CSS "Overflow:auto" and guard is a great height
There is no bug on another navigator.
Sample:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div {
margin: 5px;
}
ul {
margin: 5px;
max-height: 200px;
overflow: auto;
}
ul li.selected {
font-weight: bold;
}
.dest {
width: 500px;
min-height: 21px;
max-height: 120px;
overflow: auto;
border: 1px solid #ccc;
background-color: #f9f9f0;
padding: 3px;
}
.dest span {
display: block;
background-color: #fff;
float: left;
border-radius: 2px;
border: 1px solid #ccc;
margin: 2px;
padding: 0px 2px 0px 2px;
line-height: 21px;
height: auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("btclear").onclick = function(){
document.getElementById("dest").innerHTML = "";
};
document.getElementById("btclearplus").onclick = function(){
document.getElementById("dest").innerHTML = "";
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
};
document.getElementById("btall").onclick = function(){
for(var i = 0; i < 50; i++) {
var span = document.createElement("span");
span.innerHTML = "first name " + i + " last name " + i;
document.getElementById("dest").appendChild(span);
}
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "selected";
}
};
for(var i = 0; i < 50; i++) {
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = "nom" + i + " prenom" + i;
document.getElementById("list").appendChild(li);
}
}
}
</script>
</head>
<body>
<div id="dest" class="dest"></div>
<div>
<ul id="list"></ul>
</div>
<div>
<button id="btall">Select all</button>
<button id="btclear">Clear all</button>
<button id="btclearplus">Clear all and deselect</button>
</div>
</body>
</html>
Thank you, Jean-Pierre
change the one of the loops variable i to j because you have same variable in both loops
for(var i = 0; i < 50; i++) {
for(var j = 0; j < 50; j++) {
// do you logic
}
}
I deleted the double loop, the problem was not that here.
In Internet Explorer, you must click the "Select All" button and then the button "Clear all and deselect" to reproduce the problem.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div {
margin: 5px;
}
ul {
margin: 5px;
max-height: 200px;
overflow: auto;
}
ul li.selected {
font-weight: bold;
}
.dest {
width: 500px;
min-height: 21px;
max-height: 120px;
overflow: auto;
border: 1px solid #ccc;
background-color: #f9f9f0;
padding: 3px;
}
.dest span {
display: block;
background-color: #fff;
float: left;
border-radius: 2px;
border: 1px solid #ccc;
margin: 2px;
padding: 0px 2px 0px 2px;
line-height: 21px;
height: auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("btclear").onclick = function(){
document.getElementById("dest").innerHTML = "";
};
document.getElementById("btclearplus").onclick = function(){
document.getElementById("dest").innerHTML = "";
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
};
document.getElementById("btall").onclick = function(){
for(var i = 0; i < 50; i++) {
var span = document.createElement("span");
span.innerHTML = "first name " + i + " last name " + i;
document.getElementById("dest").appendChild(span);
}
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "selected";
}
};
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = "nom" + i + " prenom" + i;
document.getElementById("list").appendChild(li);
}
}
</script>
</head>
<body>
<div id="dest" class="dest"></div>
<div>
<ul id="list"></ul>
</div>
<div>
<button id="btall">Select all</button>
<button id="btclear">Clear all</button>
<button id="btclearplus">Clear all and deselect</button>
</div>
</body>
</html>
Thank you, Jean-Pierre
Overflow: Auto problem / bug in IE
.element { overflow-y: auto; overflow-x: visible; width: 450px; }
DEMO
I have to create a table with button inside each cell. However, I cannot remove the white space between cells. Any idea to do it? Sorry for poor presentation. Please comment if any information required?
var table = document.createElement('table');
table.className="table";
for (var i = 1; i < 5; i++){
var tr = document.createElement('tr');
for (var j = 1; j < 5; j++){
var td = document.createElement('td');
var but = document.createElement("BUTTON");
but.className = "table_but";
td.appendChild(but);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("table").appendChild(table);
table {
border-collapse: collapse;
border-spacing: 0;
}
tr{
padding: 0px;
margin: 0px;
}
td {
height: 20px;
width: 20px;
padding: 0;
margin: 0;
}
.table_but{
height: 100%;
width: 100%;
margin : 0;
padding : 0;
}
<div id="table">
</div>
There is a problem with the button's borders. First, you should set the buttons to display: block.
One simple solution is to explicitly set the button's height to the cell's height (20px). See this snippet:
var table = document.createElement('table');
table.className="table";
for (var i = 1; i < 5; i++){
var tr = document.createElement('tr');
for (var j = 1; j < 5; j++){
var td = document.createElement('td');
var but = document.createElement("BUTTON");
but.className = "table_but";
td.appendChild(but);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("table").appendChild(table);
table {
border-collapse: collapse;
border-spacing: 0;
}
tr{
padding: 0px;
margin: 0px;
}
td {
height: 20px;
width: 20px;
padding: 0;
margin: 0;
}
.table_but{
height: 20px;
width: 100%;
margin : 0;
padding : 0;
display: block;
}
<div id="table">
</div>
If you don't need the buttons' borders, removing them solves the problem too (I've added a hover color to help distinguish the buttons):
var table = document.createElement('table');
table.className="table";
for (var i = 1; i < 5; i++){
var tr = document.createElement('tr');
for (var j = 1; j < 5; j++){
var td = document.createElement('td');
var but = document.createElement("BUTTON");
but.className = "table_but";
td.appendChild(but);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("table").appendChild(table);
table {
border-collapse: collapse;
border-spacing: 0;
}
tr{
padding: 0px;
margin: 0px;
}
td {
height: 20px;
width: 20px;
padding: 0;
margin: 0;
}
.table_but{
height: 100%;
width: 100%;
margin : 0;
padding : 0;
display: block;
border: none;
}
.table_but:hover {
background-color: yellow;
}
<div id="table">
</div>
If I understand correctly, you should use in your css:
// cellpadding
th, td { padding: 0px; }
// cellspacing
table { border-collapse: collapse; border-spacing: 0; } // cellspacing="0"
// valign
th, td { vertical-align: top; }
// align (center)
table { margin: 0 auto; }
Font: In HTML5, with respect to tables, what replaces cellpadding, cellspacing, valign, and align?
If I understood, you just need to set your "line-height" to 0, see the result.
var table = document.createElement('table');
table.className="table";
for (var i = 1; i < 5; i++){
var tr = document.createElement('tr');
for (var j = 1; j < 5; j++){
var td = document.createElement('td');
var but = document.createElement("BUTTON");
but.className = "table_but";
td.appendChild(but);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("table").appendChild(table);
table {
border-collapse: collapse;
border-spacing: 0;
}
tr{
padding: 0px;
margin: 0px;
}
td {
height: 20px;
width: 20px;
padding: 0;
margin: 0;
line-height: 0;
}
.table_but{
height: 100%;
width: 100%;
margin : 0;
padding : 0;
}
<div id="table">
</div>