Question

大家好，

我正在构建一个4x4网格的盒子DIVS。此网格使用循环构建，该循环为每个div分配类，ID，图像日期和事件侦听器。这是记忆游戏的一部分。

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 + "')";

HTML

<!DOCTYPE HTML>
<html>
<head>
    <title></title>

    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">

</body>
<script type="text/javascript" src="js/main.js"></script>
</html>

单击任何div应该通过拉取memoryCards.logo对象信息并将其作为背景样式放入div的类或id中，从而导致图像的外观。

我收到一个控制台错误，它读出该document.getElementByClassNames不是showCard函数和HTMLDivElement的函数。线。我将尝试使用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

反馈会有所帮助，匿名通话功能给我带来很多麻烦。

Answer 1

看起来你在 className 的末尾有一个额外的's'。将其更改为

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

使用点击事件向div添加背景图片。

1 个答案: