通過單擊事件將背景圖像添加到div中。

Question

嗨，大家好，

我正在建立4×4的盒子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 個解決方案

解決方案1
1 2017-12-03 03:11:27

通過單擊事件將背景圖像添加到div中。

問題描述

1 個解決方案

解決方案1 1 2017-12-03 03:11:27

解決方案1
1 2017-12-03 03:11:27