Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.04.2020, 13:25
Новичок на форуме
Отправить личное сообщение для immortal727 Посмотреть профиль Найти все сообщения от immortal727
 
Регистрация: 22.04.2020
Сообщений: 2

Формирование блоков размером 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;
}
Помогите определиться как же нужно эту задачку решить?
Ответить с цитированием
  #2 (permalink)  
Старый 22.04.2020, 15:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,797

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>

Последний раз редактировалось рони, 22.04.2020 в 15:23.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сумма значений полей при нажатии на них Alex2033 Общие вопросы Javascript 11 06.06.2017 20:55
Вывод значений из базы на кнопку на странице сайта niiikkki Элементы интерфейса 0 12.05.2016 11:20
Автоматический вывод суммы значений в input-ах FALKOR Общие вопросы Javascript 3 17.04.2016 10:50
Вывод значений таймера в div Tylmaril (X)HTML/CSS 7 21.07.2013 16:47
Нестабильно срабатывает вывод значений с формы NeVirus Элементы интерфейса 8 20.02.2013 08:34