clickイベントでdivに背景画像を追加する。

私はボックスDIVSの4x4グリッドを構築しています。このグリッドには、クラス、ID、画像の日付、イベントリスナーを各divに割り当てるループが組み込まれています。これはメモリゲームの一部です。 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 + "')";

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>

クリックする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

フィードバックが参考になる、匿名の通話機能は私に多くの問題を与えます。

出典

2017-12-03 Matthew Neidig

の末尾に余分な 's'があるようです。className。それを

に変更してください。

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

出典

2017-12-03 03:11:27 vapurrmaid

フィードバックに感謝します。私は別のものを試してしまいましたが、今は別のエラーが出ているので、私は思っています。代わりに 'e.target.style.backgroundImage'を使用していますが、何らかの理由で[i]が定義されていないというエラーが表示されます。 –

clickイベントでdivに背景画像を追加する。

答えて

関連する問題