В прошлом вопросе мне помогли с получением id
div
. Но в некоторых дивах есть img
с шахматными фигурами и оттуда не получаю id
клетки. Помогите пофиксить это.
Код
const handleClick = event => {
const id = event.target.id
if (id) {
console.log(id)
}
}
function build_chess() {
var row, column;
var square;
var container = document.getElementById("container");
for (row = 0; row < 8; ++row) {
for (column = 0; column < 8; ++column) {
square = document.createElement("div");
square.id = String(row) + String(column);
if ((row + column) % 2 == 0) {
square.style.backgroundColor = "white";
} else {
square.style.backgroundColor = "brown";
}
square.classList.add("square");
switch (row) {
case 0:
switch (column) {
case 0:
case 7:
square.innerHTML = "<img src='content/lad_black.png'></img>";
break;
case 1:
case 6:
square.innerHTML = "<img src='content/kon_black.png'></img>";
break;
case 2:
case 5:
square.innerHTML = "<img src='content/slon_black.png'></img>";
break;
case 3:
square.innerHTML = "<img src='content/ferz_black.png'></img>";
break;
case 4:
square.innerHTML = "<img src='content/king_black.png'></img>";
break;
}
break;
case 1:
square.innerHTML = "<img src='content/pesh_black.png'></img>";
break;
case 6:
square.innerHTML = "<img src='content/pesh_white.png'></img>";
break;
case 7:
switch (column) {
case 0:
case 7:
square.innerHTML = "<img src='content/lad_white.png'></img>";
break;
case 1:
case 6:
square.innerHTML = "<img src='content/kon_white.png'></img>";
break;
case 2:
case 5:
square.innerHTML = "<img src='content/slon_white.png'></img>";
break;
case 3:
square.innerHTML = "<img src='content/ferz_white.png'></img>";
break;
case 4:
square.innerHTML = "<img src='content/king_white.png'></img>";
break;
}
break;
}
container.appendChild(square);
}
}
}
build_chess()
document.getElementById("container").addEventListener("click", handleClick)
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 570px) {
#container {
display: flex;
flex-wrap: wrap;
width: 400px;
border: 12px solid black;
border-radius: 6px;
height: 400px;
transform: scale(1.5);
}
.square {
height: 50px;
width: 50px;
}
.square img{
height: 50px;
width: 50px;
}
}
@media (max-width: 570px) {
#container {
display: flex;
flex-wrap: wrap;
width: 200px;
border: 6px solid black;
border-radius: 3px;
height: 200px;
transform: scale(1.7);
}
.square {
height: 25px;
width: 25px;
}
.square img{
height: 25px;
width: 25px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Шахматная доска</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container"></div>
<script src="js.js"></script>
</body>
</html>