Формирование блоков размером 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, время: 04:38. |