2017-12-03 176 views
0

大家好,通過單擊事件將背景圖像添加到div。

我正在建立一個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 

反饋將是有益的,匿名的通話功能給了我很多的麻煩。

回答

1

它看起來像你有一個額外的's'末尾className。將其更改爲

document.getElementsByClassName('memoryCard').... 
+0

感謝您的反饋意見。我最終嘗試了一些其他的東西,我認爲這是因爲現在我得到了一個不同的錯誤。 我使用'e.target.style.backgroundImage'代替,但我得到一個錯誤,說[i]沒有定義,出於某種原因。 –