remedy remedy - 4 months ago 18
HTML Question

Making a match game using Javascript

I am making a match game for my Web Programming class, and I am having difficulty working through arrays to flip the images when a cell is selected. I'm not seeing why when clicked, it won't change to the image. I know I'm missing the full functionality of the game, but I just want to make sure the cells flip to the image.

HTML:

<html>
<head>
<title>Match Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="board">

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


JS:

document.addEventListener("DOM-ContentLoaded", playMemory(), false);

function playMemory () {

function createBoard () {
var matchBoard = document.getElementById("board");
var header = document.createElement("h1");
var footer = document.createElement("footer");
var matchTable = document.createElement("table");
var message = document.createElement("div");
var olay = document.createElement("div");
var timer = document.createElement("div");
var choice = [];


var row, cell, defaultImg;
for(var i = 0; i < 6; i++) {
row = document.createElement("tr");
matchTable.appendChild(row);
for(var j = 0; j < 6; j++) {
cell = document.createElement("td");
row.appendChild(cell);
defaultImg = document.createElement("img");
defaultImg.setAttribute("src", "main.jpg");
cell.appendChild(defaultImg);
}
}
timer.appendChild(document.createTextNode("00:00"));
header.appendChild(document.createTextNode("Pick-A-Hero"));
footer.appendChild(document.createTextNode(""));
matchBoard.appendChild(header);
matchBoard.appendChild(matchTable);
matchBoard.appendChild(timer);
matchBoard.appendChild(message);
matchBoard.appendChild(footer);

}
var usedHeroes = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,
0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17];

function cellClick(cell) {
if(cell.style.backgroundImage === "url(main.jpg)"){
for(var i =0; i< document.getElementsByTagName('td').length;i++){
var random = Math.floor(Math.Random() * 36);
cell[i].style.backgroundImage = "url(hero" + usedHeroes[random] + ".jpg";
}
}
}

document.addEventListener("click", function() {
for(var i = 0; i < document.getElementsByTagName('td').length; i++) {
cellClick(this);
}
});


createBoard();


}


The jpg files are named hero0.jpg to hero17.jpg. I'm hoping someone can make sense of this and point me in the right direction. New to javascript, any help would be appreciated :D

Answer

Your problem is that your click listener is calling the function cellClick with the wrong argument. The value of this, which is the scope of your listener is the document, because the event listener is added to the document (through document.addEventListener)

You can try to debug the cellClick method, and you will see that your are not getting a cell element but the document.

To illustrate the issue, I added a snippet that show how to get cell elements and add an event listeners on each cell.
A click event listener is also added to the document to illustrate the fact that wherever the user click, the this value is always the document

document.addEventListener("click", function() {
  console.log(this === document);
});

var cellELs = document.querySelectorAll(".cell")

for (i = 0; i < cellELs.length; ++i) {
  cellELs[i].addEventListener("click", function() {
    this.style['background-color'] = "red";
  });
}
.cell {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  border: 1px green solid;
  background-color: lightgreen;
}
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>

Comments