Динамическая отрисовка контента?

Question

[prolina]

Есть массив(colorsArray), содержащий цвета из картинок (каждого цвета по паре). И есть радио баттоны, изменяющие размер поля с картинками.

<input type="radio" id="size4" name="difficulty" value="4" checked>4x4
        <input type="radio" id="size6" name="difficulty" value="6">6x6
        <input type="radio" id="size8" name="difficulty" value="8">8x8

По дефолту выбрано поле размером 4х4, значит из массива должно браться 16 элементов (8 пар цветов). При клике на радио баттон со значением - 6, должно отрисоваться поле 6х6 размером и взяться 36 цветов из массива (18 пар).

const colorsArray = [
    "img/blue.jpg","img/blue.jpg","img/red.jpg","img/red.jpg",
    "img/yellow.png","img/yellow.png","img/green.jpg", "img/green.jpg",
    "img/pink.jpg","img/pink.jpg","img/grey.png", "img/grey.png",
    "img/orange.jpg", "img/orange.jpg", "img/purple.jpg", "img/purple.jpg",
    "img/turquoise.jpg","img/turquoise.jpg","img/eggplant.jpg","img/eggplant.jpg",
    "img/silver.jpg","img/silver.jpg","img/indigo.jpg", "img/indigo.jpg",
    "img/tawny.jpg","img/tawny.jpg","img/olive.jpg", "img/olive.jpg",
    "img/mustard.jpg", "img/mustard.jpg", "img/chocolate.jpg", "img/chocolate.jpg",
    "img/lavender.jpg", "img/lavender.jpg", "img/honeydew.jpg", "img/honeydew.jpg",
    "img/cerise.png","img/cerise.png","img/gold.jpg","img/gold.jpg",
    "img/wine.jpg","img/wine.jpg","img/beige.jpg", "img/beige.jpg"];

const createBoard = () => {
    let mixedCardArray = shuffleCards(colorsArray); //shuffleCards - дополнительная функция, которая перемешивает массив  с цветами, т.к. в массиве они идут по порядку
    let boardSize = getRadioValue(); // getRadioValue - доп функция, которая получает значение инпута 
// boardSize = 4, т.к. по дефолту стоит значение 4
    for (let i = 0; i < boardSize; i++) {
        const row = document.createElement('div');
        const container = document.createElement("div");
        container.setAttribute('id', 'main_container');
        row.classList.add('row');
        container.appendChild(row);

        for (let j = 0; j < boardSize; j++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            row.appendChild(cell);
            const card = document.createElement('div');
            card.classList.add('card');
            card.value = ??????
            cell.appendChild(card);

            const backFace = document.createElement("img");
            backFace.classList.add('back-face');

            const frontFace = document.createElement("img");
            frontFace.setAttribute('src', card.value);
            frontFace.classList.add('front-face');

            card.appendChild(backFace);
            card.appendChild(frontFace);
            container.appendChild(card);
            document.getElementById('memory_board').appendChild(container);

            card.addEventListener('click', flipCard);
            card.addEventListener('click', startTime);
        }
    }
};

div#memory_board {
    background-color: cornsilk;
    border: #999 1px solid;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    padding: 24px;
    /*height: 80%;*/
    /*width: max-content;*/
    margin: 20px auto;
}

.card {
    background-color: #90acdc;
    border: #000 1px solid;
    border-radius: 15px;
    height: 150px;
    width: 100px;
    cursor: pointer;
    transform: scale(1);
    transform-style: preserve-3d;
    transition: transform .5s;
    margin: 2px;
}

.front-face,
.back-face {
    width: 100%;
    height: 100%;
    /*padding: 20px;*/
    position: absolute;
    border-radius: 15px;
    backface-visibility: hidden;
}

.front-face {
    transform: rotateY(180deg);
}

.row {
    width:100%;
    display:flex;
    flex-direction: row;
}

.cell{
    position: relative;
    width: 100%;
}

В данный момент отрисовывается поле размеров 4*4, но не присвается путь к картинке frontFace.setAttribute('src', card.value);

Answer 1

[Алексей Чипига]

На сколько я помню, задавать src нужно так

frontFace.src = card.value

А не через setAttribute. Хотя это может и работать

Больше вопрос чего вы добиваетесь от card.value, когда присваиваете div'у это значение? Если уже делать так, то используйте setAttribute и getAttribute