我正在为我的网络编程类(class)制作一个匹配游戏，当选择一个单元格时，我很难通过数组来翻转图像。我不明白为什么点击后，它不会改变为图像。我知道我错过了游戏的全部功能，但我只想确保单元格翻转到图像。
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();
}
jpg 文件被命名为hero0.jpg 至hero17.jpg。我希望有人能够理解这一点并为我指明正确的方向。 javascript新手，任何帮助将不胜感激:D
最佳答案
您的问题是您的点击监听器使用错误的参数调用函数cellClick。 this 的值，即你的监听器的范围是文档，因为事件监听器是添加到文档中的(通过 document.addEventListener)
您可以尝试调试 cellClick 方法，您会发现您没有获得单元格元素，而是获得了文档。
为了说明这个问题，我添加了一个代码片段，展示如何获取单元格元素并在每个单元格上添加事件监听器。
文档中还添加了单击事件监听器，以说明无论用户在何处单击，this 值始终是 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>关于javascript - 使用 Javascript 制作比赛游戏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38546600/