Estoy tratando de hacer un color negro y luego un color blanco, pero algunos colores se juntan horizontalmente y no quería que se quedara así. Quiero crear un tablero a partir de un bucle.
¿Alguien podría ayudar?
var tab = document.querySelector('.grid-container') for (let i = 1; i <= 64; i++) { if (i % 3 == 0) { tab.innerHTML += '<div class="grid-item black">'+i+'</div>' } else { tab.innerHTML += '<div class="grid-item white">'+i+'</div>' } } .grid-container { display: grid; grid-template-columns: repeat(8, 50px); grid-template-rows: repeat(8, 50px); background-color: #2196F3; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); font-size: 30px; text-align: center; } .black{ background-color: black; } .white { background-color: white; } <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/style.css"> <title>Document</title> </head> <body> <div class="grid-container"> </div> <script src="./board.js"></script> </body> </html>Use un segundo bucle for para distinguir fácilmente filas y columnas.
Entonces podemos usar el siguiente if para buscar cuadrados negros/blancos:
if ((i + j) % 2) { tab.innerHTML += '<div class="grid-item black">'+n+'</div>' } else { tab.innerHTML += '<div class="grid-item white">'+n+'</div>' } var tab = document.querySelector('.grid-container') for (let i = 0; i < 8; i++) { for (let j = 0; j < 8; j++) { let n = 1 + (i * 8 + j); if ((i + j) % 2) { tab.innerHTML += '<div class="grid-item black">'+n+'</div>' } else { tab.innerHTML += '<div class="grid-item white">'+n+'</div>' } } } .grid-container { display: grid; grid-template-columns: repeat(8, 50px); grid-template-rows: repeat(8, 50px); background-color: #2196F3; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); font-size: 30px; text-align: center; } .black{ background-color: black; } .white { background-color: white; } <div class="grid-container"></div>