как то это все в функцию бы запихать и передавать туда число что бы он рисовал такою доску какое чисо было преданно
function renderChess(n) { const chessWrap = document.createElement('div'); chessWrap.style.display = 'flex'; /// Добавил флексы chessWrap.style.flexWrap = 'wrap'; document.body.appendChild(chessWrap); const size = n * 20; chessWrap.style.width = `${size}px`; for (let i = 0; i < n; i++) { for (let j = 0; j < n; j++) { const item = document.createElement('div'); item.style.height = '20px'; item.style.width = '20px'; if ((i + j) % 2 === 0) { //Формула отвечающая за чередование item.style.background = '#000'; } else { item.style.background = 'red'; } chessWrap.appendChild(item); } } }
Добавил ещё один параметр, чтобы можно было менять размер ячейки. Если не указывать, то будет 20px по-умолчанию. function renderChess(n, w = 20) { const chessWrap = document.createElement('div'); chessWrap.style.display = 'flex'; /// Добавил флексы chessWrap.style.flexWrap = 'wrap'; document.body.appendChild(chessWrap); const size = n * w; chessWrap.style.width = `${size}px`; for (let i = 0; i < n; i++) { for (let j = 0; j < n; j++) { const item = document.createElement('div'); item.style.height = `${w}px`; item.style.width = `${w}px`; if ((i + j) % 2 === 0) { //Формула отвечающая за чередование item.style.background = '#000'; } else { item.style.background = 'red'; } chessWrap.appendChild(item); } } }
Обсуждают сегодня