Формирование блоков размером n x n и вывод в них из объекта значений
Дан объект
let Fields = { cat: { title: "Кот", img:"img/cat.jpg" }, book: { title: "Книга", img:"img/book.jpg" }, car: { title: "Машина", img: "img/car.jpg", } } Никак не могу понять, как же сформировать ячейки n x n, да при том еще и рандомно выводить в них информацию из объекта, ведь там всего лишь три свойства. function generateField(object, section, max) { //let n = randomInteger(3, max); let n = max; section.style.cssText = ` grid-template-columns:repeat(${n},1fr); grid-template-rows:repeat(${n},1fr);` ; for (let i = 0; i < max * max; i++) { for (let item in object) { let block = document.createElement("div"); let title = document.createElement("h2"); title.innerText = object[item].title; let pic = document.createElement("img"); pic.setAttribute("src", object[item].img); // В наш блок div добавили заголовок и картинку block.append(title, pic); // Добавили уже в самый верхний блок grid всё его содержимое //section.appendChild(block); } // section.appendChild(block)[i]; } // section.дочерние_элементы[рандомный_индекс] } function randomInteger(min, max) { // случайное число от min до (max+1) let rand = min + Math.random() * (max + 1 - min); return Math.floor(rand); } let section = document.querySelector(".GameField"); generateField(Fields, section, 5); Чтоб много не выводить квадратиков я указал пока конкретное число. В html все просто, пустой div с классом GameField В Css .GameField { display: grid; grid-gap: 15px; grid-auto-flow: dense; } Помогите определиться как же нужно эту задачку решить? |
grid вывод объекта данных в таблицу
immortal727,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .GameField { display: grid; grid-gap: 15px; grid-auto-flow: dense; } img{ height: 50px; } </style> </head> <body> <div class="GameField"></div> <script> let Fields = { cat: { title: "Кот", img:"https://cs13.pikabu.ru/avatars/2072/x2072904-1526997095.png" }, book: { title: "Книга", img:"https://i.pinimg.com/280x280_RS/e8/96/dd/e896ddf3106f7568c3307cae154d9d47.jpg" }, car: { title: "Машина", img: "https://cdn2.scratch.mit.edu/get_image/gallery/5282815_200x130.png", } } function generateField(object, section, max) { section.style.cssText = ` grid-template-columns:repeat(${max},1fr); grid-template-rows:repeat(${max},1fr);` ; let arrKeys = Object.keys(object), len = arrKeys.length, length = max * max, arrblocks = Array.from({length}, () => { let i = randomInteger(len), key = arrKeys[i], item = object[key]; let block = document.createElement("div"); let title = document.createElement("h2"); title.textContent = item.title; let pic = document.createElement("img"); pic.src = item.img; block.append(title, pic); return block }); section.append(...arrblocks); } function randomInteger(max) { return Math.floor(Math.random() * max); } let section = document.querySelector(".GameField"); generateField(Fields, section, 5); </script> </body> </html> |
Часовой пояс GMT +3, время: 10:09. |