Javascript 使用单击事件将背景图像添加到div。

大家好,

我正在构建一个4x4网格的方块div。这个网格是用一个循环构建的，该循环将类、ID、图像日期和事件侦听器分配给每个div。这是内存游戏的一部分

var cards_shown = 0;
var memoryCards = [
    {
        id: 1,
        name: 'Horde Emblem',
        logo: 'horde.png',
        showing: false
    },
    {
        id: 2,
        name: 'Orc Emblem',
        logo: 'orc.png',
        showing: false
    },
    {
        id: 3,
        name: 'Troll Emblem',
        logo: 'troll.png',
        showing: false
    },
    {
        id: 4,
        name: 'Tauren Emblem',
        logo: 'tauren.jpg',
        showing: false
    },
    {
        id: 5,
        name: 'Forsaken Emblem',
        logo: 'dead.gif',
        showing: false
    },
    {
        id: 6,
        name: 'Blood Elf Emblem',
        logo: 'belf.png',
        showing: false
    },
    {
        id: 7,
        name: 'Goblin Emblem',
        logo: 'goblin.png',
        showing: false
    },
    {
        id: 8,
        name: 'Pandaren Emblem',
        logo: 'panda.png',
        showing: false
    }
];

function layoutCards(){
    for (var i=0; i < 16; i++) {
        var genDiv = document.createElement('div');
        genDiv.setAttribute('id', 'memoryCard' + (i+1));
        genDiv.setAttribute('class', 'memoryCard');
        genDiv.setAttribute('data-imageId', i)

        genDiv.addEventListener('click', function(e) {
            showCard(e)
        });

        document.getElementsByTagName('div')[0].appendChild(genDiv);

        if ((i+1) % 4 == 0) {
            var newBr = document.createElement('br');
            document.getElementsByTagName('div')[0].appendChild(newBr);

        }
    }
}



function showCard(e){
    cards_shown += 1
    document.getElementByClassNames('memoryCard').style.backgroundImage = "url('img/" + memoryCards[i].logo + "')";

var卡\u显示=0；
变量内存卡=[
{
id:1，
名称：'部落徽章'，
徽标：“horde.png”，
显示：错误
},
{
id:2，
名称：“兽人徽章”，
徽标：“orc.png”，
显示：错误
},
{
id:3，
名称：“巨魔徽章”，
徽标：“troll.png”，
显示：错误
},
{
id:4，
名称：“牛头人徽章”，
徽标：“tauren.jpg”，
显示：错误
},
{
id:5，
名称：“被遗弃的徽章”，
徽标：“dead.gif”，
显示：错误
},
{
id:6，
名称：'血精灵徽章'，
徽标：“belf.png”，
显示：错误
},
{
id:7，
名称：“地精徽章”，
徽标：“goblin.png”，
显示：错误
},
{
id:8，
名称：“熊猫人徽章”，
徽标：“panda.png”，
显示：错误
}
];
函数布局卡（）{
对于（变量i=0；i<16；i++）{
var genDiv=document.createElement（'div'）；
setAttribute（'id'，'memoryCard'+（i+1））；
genDiv.setAttribute（'class'，'memoryCard'）；
genDiv.setAttribute（'data-imageId'，i）
genDiv.addEventListener（'click'，函数（e）{
展示卡（e）
});
document.getElementsByTagName（'div'）[0].appendChild（genDiv）；
如果（（i+1）%4==0）{
var newBr=document.createElement（'br'）；
document.getElementsByTagName（'div'）[0].appendChild（newBr）；
}
}
}
功能展示卡（e）{
显示的卡数+=1
document.getElementByClassNames（'memoryCard'）.style.backgroundImage=“url（'img/“+memoryCards[i].logo+”）”；

HTML

单击任何div都会产生图像的外观，方法是提取memoryCards.logo对象信息并将其作为背景样式放入div的类或id中

我得到一个控制台错误，读取该文档。getElementByClassNames不是showCard函数和HtmlLevel.line的函数。我将尝试改用getElementByID，并尝试以接收每个生成的div的修改id标记的方式传递参数

它是这样写的：

Uncaught TypeError: document.getElementByClassNames is not a function
    at showCard (main.js:98)
    at HTMLDivElement.<anonymous> (main.js:81)
showCard @ main.js:98
(anonymous) @ main.js:81

未捕获类型错误：document.getElementByClassNames不是函数
在展示卡（main.js:98）
在HtmlLevel。（main.js:81）
showCard@main.js:98
（匿名）@main.js:81

---

反馈会很有帮助，匿名调用函数会给我带来很多麻烦。

看起来你在类名的末尾有一个额外的“s”。将其更改为

document.getElementsByClassName('memoryCard')....

---

感谢您的反馈。我最后尝试了其他方法，我认为这是可行的，因为现在我遇到了一个不同的错误。我使用了“e.target.style.backgroundImage”，但由于某种原因，我遇到了一个错误，即[I]没有定义。

document.getElementsByClassName('memoryCard')....