Javascript 为什么我的forEach循环不从array.length创建DOM元素？

我处理一个问题已经有一段时间了。 我的问题是我用循环迭代一个数组，但最后它只创建了一个元素。但我的目标是用卡片创建一个网格

这是我的密码

    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();

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,12]；
var shuffled_array=shuffle（元素的数组_）；
var deck_of_cards=document.createElement（“div”）；
var卡片=”；
函数newGame（）{
卡片组。setAttribute（“id”、“卡片组”）；
文件.正文.附件（卡片组）；
/*循环遍历所有数组元素并应用类框*/
洗牌数组.forEach（createElementBoard）；
卡片组中的卡片组。innerHTML=卡片；
}
/*寄宿生创作*/
函数createElementBoard（i_卡）{
卡片=”；
回程卡；
}
新游戏（）；

代码不会产生任何错误

谢天谢地，

对数组进行迭代，但不返回任何内容（您甚至不应该得到“单个元素”（编辑：正如Spoonmiser在下面评论的那样，这似乎是全局变量使用的产物）

如果要设置innerHTML，则需要一个创建字符串的函数。这可以通过两种方式实现：

可以使用创建字符串数组，然后使用将其转换为单个字符串

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();

函数newGame（）{
卡片组。setAttribute（“id”、“卡片组”）；
文件.正文.附件（卡片组）；
/*循环遍历所有数组元素并应用类框*/
常量卡=洗牌数组.map（createElementBoard）；
deck_of_cards.innerHTML=cards.join（“”）；
}
/*寄宿生创作*/
函数createElementBoard（i_卡）{
const card=“”；
回程卡；
}
新游戏（）；

---

或者，您可以使用这不可能是您将卡数据保存在

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();

函数newGame（）{
卡片组。setAttribute（“id”、“卡片组”）；
文件.正文.附件（卡片组）；
/*循环遍历所有数组元素并应用类框*/
var卡片=”；
洗牌数组。forEach（函数（i_卡）{
卡片+=”；
});
卡片组中的卡片组。innerHTML=卡片；
}
新游戏（）；

这里有很多问题

您要做的是，将一张卡的HTML分配给全局变量

cards

，并在每次循环中覆盖它，因此在最后，它只是最后一张卡的HTML

如果更改行：

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

并停止

卡成为全球卡：

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

函数createElementBoard（i_卡）{
var-card=“”；
回程卡；
}
shuffled\u数组。forEach（createElementBoard）
未调用任何函数。。相反，应该是
shuffled\u数组。forEach（createElementBoard（））
卡组和shuffled\u数组最初是在哪里定义的？例如，编写的代码在未定义的（未定义一副牌）上使用setAttribute，什么是
洗牌数组
？不返回任何内容，因此您必须在
forEach（）
调用中执行操作，而不是将内容返回到调用上下文。出于某种原因，@Luca删除了我的变量声明。你能告诉我为什么是我的朋友吗？这是一种不包含变量的Githubs策略吗？谢谢，@spoonmiser。成功了！不过我想问一件事！如果我将var卡设置为let card并在全局范围内声明它，这会是一个问题吗？通过全局变量与函数通信不是一个好主意。如果从两个位置调用函数，会发生什么情况？
shuffled_array.forEach(function(i) {
    deck_of_cards.innerHTML += createElementBoard(i)
});

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