Question 44907 in Html Question posted in
Some basic documentation can be found here.

Making a 7×7 checkboard in JavaScript – Html

When I run the code below nothing shows up on my webpage and I’m wondering why.

I’m not too sure what i’m doing wrong here. I tried running this through ChatGPT and it said it should work but when I run it the page is left completely blank.

for (let i = 0; i < 49; i++) {
  const createDivs = document.createElement('div');
  document.body.appendChild(createDivs);
  if (i % 2 === 0) {
    createDivs.classList.add('set-to-black');
  } else {
    createDivs.classList.add('set-to-red');
  }
}

const setToBlack = document.getElementsByClassName('set-to-black');

for (let i = 0; i < setToBlack.length; i++) {
  setToBlack[i].style.backgroundColor = 'black';
  setToBlack[i].style.height = '60px';
};

const setToRed = document.getElementsByClassName('set-to-red');

for (let i = 0; i < setToRed.length; i++) {
  setToRed[i].style.backgroundColor = 'red';
   setToRed[i].style.height = '60px';
};
Tags:

2

Answers


  1. 0

    Uncomment your code, remove the lines that sets the height then add just a tiny bit of CSS and you’re there. Fully annotated example below.

    for (let i = 0; i < 49; i++) {
  const createDivs = document.createElement('div');
  document.body.appendChild(createDivs);
  if (i % 2 === 0) {
    createDivs.classList.add('set-to-black');
  } else {
    createDivs.classList.add('set-to-red');
  }
}

const setToBlack = document.getElementsByClassName('set-to-black');
for (let i = 0; i < setToBlack.length; i++) {
  setToBlack[i].style.backgroundColor = 'black';
  /*setToBlack[i].style.height = '60px'; removed this so the divs are square */
};

const setToRed = document.getElementsByClassName('set-to-red');
for (let i = 0; i < setToRed.length; i++) {
  setToRed[i].style.backgroundColor = 'red';
   /*setToRed[i].style.height = '60px'; removed this so the divs are square*/
};
    div {
  width: calc(100% / 7); /* make each div 1/7th of the overall width so the 8th, 16th, etc start on a new linw */
  display: inline-block; /* make them behave like inline block elements so siblings elements sit next to each other */
  vertical-align: top; /* this removes the space for descenders */
  aspect-ratio: 1 / 1; /* make them all square */
}
    Login or Signup to reply.
  2. 0

    Using CSS Grid you can solve this with one loop.

    1. Set a container.
    2. Create some CSS using CSS Grid, and using nth-child to identify which square should be black/red.
    3. Create some HTML identifying each square with a square class, and adding in a colour class depending on whether the iteration index is odd or even.
    4. Finally add the HTML to the container element.
    const container = document.querySelector('.container');
const html = [];

for (let i = 0; i < 49; i++) {
  const color = i % 2 === 0 ? 'red' : 'black';
  html.push(`<div class="square ${color}"></div>`);
}

container.innerHTML = html.join('');
    .container { display: grid; grid-template-columns: repeat(7, calc(100% / 7)); width: 100%; }
.square { calc(100% / 7); aspect-ratio: 1 / 1;}
.square:nth-child(odd) { background-color: black; }
.square:nth-child(even) { background-color: red; }
    <section class="container"></section>

    Additional documentation

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search