0
我正在建立一個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對象信息和將其放入的類或ID div作爲背景風格。
我得到一個控制檯錯誤,它指出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
反饋將是有益的,匿名的通話功能給了我很多的麻煩。
感謝您的反饋意見。我最終嘗試了一些其他的東西,我認爲這是因爲現在我得到了一個不同的錯誤。 我使用'e.target.style.backgroundImage'代替,但我得到一個錯誤,說[i]沒有定義,出於某種原因。 –