我正在尝试制作一个记忆游戏，并且我将木板作为保存图片来源的多维数组。我想要它，以便在div单击时添加照片。下面的代码不起作用。
我尝试测试一下，用console.log单击div时是否发生任何事情，但没有任何反应。该功能永远不会运行。但是，在控制台中运行该功能可以使其正常工作。
function click(n, n1) {
console.log("S")
if(current == "") {
console.log(board);
console.log(board[n][n1]);
current = board[n][n1].toString();
var cols = document.getElementsByClassName('column');
for(var i = 0; i < cols.length; i++) {
if(cols[i].id == n.toString() + n1.toString()) {
console.log('yss')
cols[i].style.backgroundColor = "white";
currentImg = document.createElement("img");
currentImg.style.width = "50%";
currentImg.style.height = "auto";
currentImg.style.display = "block";
currentImg.style.margin = "0 auto";
currentImg.style.verticalAlign = "middle";
currentImg.src = board[n][n1];
cols[i].appendChild(currentImg);
}
}
}
}<div class="row">
<div class="column" onclick="click(0,0);" id="00"></div>
<div class="column" onclick="click(0,1);" id="01"></div>
<div class="column" onclick="click(0,2);" id="02"></div>
<div class="column" onclick="click(0,3);" id="03"></div>
</div>
<div class="row">
<div class="column" onclick="click(1,0)" id="10"></div>
<div class="column" onclick="click(1,1);" id="11"></div>
<div class="column" onclick="click(1,2);" id="12"></div>
<div class="column" onclick="click(1,3);" id="13"></div>
</div>
<div class="row">
<div class="column" onclick="click(2,0);" id="20"></div>
<div class="column" onclick="click(2,1);" id="21"></div>
<div class="column" onclick="click(2,2);" id="22"></div>
<div class="column" onclick="click(2,3);" id="23"></div>
</div>
<div class="row">
<div class="column" onclick="click(3,0);" id="30"></div>
<div class="column" onclick="click(3,1);" id="31"></div>
<div class="column" onclick="click(3,2);" id="32"></div>
<div class="column" onclick="click(3,3);" id="33"></div>
</div>
答案 0 :(得分：3)
您的函数名称click与事件名称click冲突。更改函数名称即可解决问题。
function clicked(n, n1) {
console.log("S")
if(current == "") {
console.log(board);
console.log(board[n][n1]);
current = board[n][n1].toString();
var cols = document.getElementsByClassName('column');
for(var i = 0; i < cols.length; i++) {
if(cols[i].id == n.toString() + n1.toString()) {
console.log('yss')
cols[i].style.backgroundColor = "white";
currentImg = document.createElement("img");
currentImg.style.width = "50%";
currentImg.style.height = "auto";
currentImg.style.display = "block";
currentImg.style.margin = "0 auto";
currentImg.style.verticalAlign = "middle";
currentImg.src = board[n][n1];
cols[i].appendChild(currentImg);
}
}
}
}.column { width:20px; height:20px; border:1px solid grey; display:inline-block; }<div class="row">
<div class="column" onclick="clicked(0,0);" id="00"></div>
<div class="column" onclick="clicked(0,1);" id="01"></div>
<div class="column" onclick="clicked(0,2);" id="02"></div>
<div class="column" onclick="clicked(0,3);" id="03"></div>
</div>
<div class="row">
<div class="column" onclick="clicked(1,0)" id="10"></div>
<div class="column" onclick="clicked(1,1);" id="11"></div>
<div class="column" onclick="clicked(1,2);" id="12"></div>
<div class="column" onclick="clicked(1,3);" id="13"></div>
</div>
<div class="row">
<div class="column" onclick="clicked(2,0);" id="20"></div>
<div class="column" onclick="clicked(2,1);" id="21"></div>
<div class="column" onclick="clicked(2,2);" id="22"></div>
<div class="column" onclick="clicked(2,3);" id="23"></div>
</div>
<div class="row">
<div class="column" onclick="clicked(3,0);" id="30"></div>
<div class="column" onclick="clicked(3,1);" id="31"></div>
<div class="column" onclick="clicked(3,2);" id="32"></div>
<div class="column" onclick="clicked(3,3);" id="33"></div>
</div>
首先要避免使用内联HTML事件属性，例如onclick。在我们拥有现代标准和最佳实践之前，已经使用了25年以上的技术，并且已经有了many good reasons not to use this syntax。实际上，我们可以在所有这些元素的容器上仅设置一个click事件处理程序，并利用event bubbling处理那里的所有点击，从而大大简化您的代码。此外，我们可以摆脱所有id属性（这使解决方案变得脆弱），并使用data-*属性，以便每个元素都可以将其位置存储在矩阵中。
请注意HTML现在有多干净：
document.querySelector(".wrapper").addEventListener("click", function(event){
// Check to see if the event originated at an element with a class of "column"
if(event.target.classList.contains("column")){
let cell = event.target.dataset.id; // Get the data-id value of the clicked element
console.log(cell);
}
});.column { width:20px; height:20px; border:1px solid grey; display:inline-block; }<div class="wrapper">
<div class="row">
<div class="column" data-id="0,0"></div>
<div class="column" data-id="0,1"></div>
<div class="column" data-id="0,2"></div>
<div class="column" data-id="0,3"></div>
</div>
<div class="row">
<div class="column" data-id="1,0"></div>
<div class="column" data-id="1,1"></div>
<div class="column" data-id="1,2"></div>
<div class="column" data-id="1,3"></div>
</div>
<div class="row">
<div class="column" data-id="2,0"></div>
<div class="column" data-id="2,1"></div>
<div class="column" data-id="2,2"></div>
<div class="column" data-id="2,3"></div>
</div>
<div class="row">
<div class="column" data-id="3,0"></div>
<div class="column" data-id="3,1"></div>
<div class="column" data-id="3,2"></div>
<div class="column" data-id="3,3"></div>
</div>
</div>