Почему мой цикл forEach не создает элементы DOM из array.length?

Question

Я уже некоторое время занимаюсь проблемой.Моя проблема в том, что я перебираю массив с циклом, но в конце он просто создает один элемент.Но моя цель - создать сетку с карточками

Вот мой код.

    var array_of_elements = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12];
    var shuffled_array = shuffle(array_of_elements);
    var deck_of_cards = document.createElement("div");
    var cards = "";

  function newGame() {
            deck_of_cards.setAttribute("id", "card_deck");
            document.body.appendChild(deck_of_cards);

            /*  Loop throught all the array elemets and apply the class box*/
            shuffled_array.forEach(createElementBoard);
            deck_of_cards.innerHTML = cards;
        }

        /* Boarder creation  */
        function createElementBoard(i_cards) {
            cards = "<div class='box box-" + i_cards + "'></div>";
            return cards;
        }
newGame();

Код не выдает никаких ошибок.

Спасибо

Answer 1

Возможно, вы не сохраните данные карт в переменной global или не поместите реализацию forEach локально.

function newGame() {
    deck_of_cards.setAttribute("id", "card_deck");
    document.body.appendChild(deck_of_cards);

    /*  Loop throught all the array elemets and apply the class box*/
    var cards = "";
    shuffled_array.forEach(function(i_cards) {
        cards += "<div class='box box-" + i_cards + "'></div>";

    });
    deck_of_cards.innerHTML = cards;
}
newGame();

Answer 2

Здесь есть ряд проблем.

Что вы делаете, это назначаете HTML-код для одной карты глобальной переменной cards и перезаписываете ее каждый раз черезваш цикл, так что в конце это HTML только для последней карты.

Если вы измените строку:

cards = "<div class='box box-" + i_cards + "'></div>";

на:

cards += "<div class='box box-" + i_cards + "'></div>";

ЭтоЯ заставлю код работать , но это не лучшее решение.

Функции могут возвращать значение, поэтому вместо этого общение через глобальный код является плохой практикой.Подумайте, нужно ли вам перезапускать эту функцию, на ком лежит ответственность за сброс cards?Что если вы запустили его из нескольких мест, как бы вы обеспечили, чтобы они не мешали друг другу?

Вместо этого учтите следующее:

shuffled_array.forEach(function(i) {
    deck_of_cards.innerHTML += createElementBoard(i)
});

И перестаньте cards быть глобальным:

function createElementBoard(i_cards) {
    var card = "<div class='box box-" + i_cards + "'></div>";
    return card;
}

Answer 3

Array.prototype.forEach перебирает массив, но ничего не возвращает (вы даже не должны получать этот «единственный элемент» (правка: как прокомментировал SpoonMeiser ниже, это выглядит как артефакт)вашей глобальной переменной используйте)).

Если вы хотите установить innerHTML, вам нужна функция, которая создает строку.Это можно сделать двумя способами:

Вы можете использовать Array.prototype.map для создания массива строк, а затем использовать Array.prototype.join дляпреобразовать их в один.

function newGame() {
    deck_of_cards.setAttribute("id", "card_deck");
    document.body.appendChild(deck_of_cards);

    /*  Loop throught all the array elemets and apply the class box*/
    const cards = shuffled_array.map(createElementBoard);
    deck_of_cards.innerHTML = cards.join("");
}

/* Boarder creation  */
function createElementBoard(i_cards) {
    const card = "<div class='box box-" + i_cards + "'></div>";
    return card;
}
newGame();

Или вы можете использовать Array.prototype.reduce