В массиве все элементы = 0. При клике по квадрату в сетке grid получаем ID Diva и в этой координате вокруг значения элементов меняются на 3.
Но не работает замена. Кто знает, помогите пожалуйста!!
Координаты клика q и w подставляю в console.log(replaceSurrounding(matrix, q, w));
Но это же неправильно? Надо цифры подставлять. А как это сделать - не понимаю...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Замена в матрице</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
display: grid;
width: 220px;
height: 220px;
}
#grid {
display: grid;
grid-template-columns: repeat(5, auto);
grid-template-rows: repeat(5, auto);
width: 220px;
height: 220px;
}
#grid>div {
height: 42px;
width: 42px;
background-color: #38d929;
border: solid 1px white;
}
</style>
<div class="wrapper">
<div id="grid">
<div class="block" id="0/0"></div>
<div class="block" id="1/0"></div>
<div class="block" id="2/0"></div>
<div class="block" id="3/0"></div>
<div class="block" id="4/0"></div>
<div class="block" id="0/1"></div>
<div class="block" id="1/1"></div>
<div class="block" id="2/1"></div>
<div class="block" id="3/1"></div>
<div class="block" id="4/1"></div>
<div class="block" id="0/2"></div>
<div class="block" id="1/2"></div>
<div class="block" id="2/2"></div>
<div class="block" id="3/2"></div>
<div class="block" id="4/2"></div>
<div class="block" id="0/3"></div>
<div class="block" id="1/3"></div>
<div class="block" id="2/3"></div>
<div class="block" id="3/3"></div>
<div class="block" id="4/3"></div>
<div class="block" id="0/4"></div>
<div class="block" id="1/4"></div>
<div class="block" id="2/4"></div>
<div class="block" id="3/4"></div>
<div class="block" id="4/4"></div>
</div>
</div>
<script>
const matrix = [
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0]
];
const handleClick = event => {
const id = event.target.id
if (id) {
console.log(id)
let str1 = id;
let q = str1.slice(0,-2);
let w = str1.slice(-1);
function replaceSurrounding(matrix, q, w) {
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
if (i === q && j === w) {
// Заменяем элементы справа, сверху и снизу
for (let x = Math.max(0, j - 1); x < Math.min(5, j + 2); x++) {
for (let y = Math.max(0, i - 1); y < Math.min(5, i + 2); y++) {
if (x !== j || y !== i) {
matrix[y][x] = "3";
}
}
}
// Обработка особых случаев
/* if (j === 0) {
// Заменяем только элементы справа и снизу, если индекс j равен 0
for (let x = j + 1; x < Math.min(5, j + 2); x++) {
for (let y = Math.max(0, i - 1); y < Math.min(5, i + 2); y++) {
if (x !== j || y !== i) {
matrix[y][x] = "1";
}
}
}
} else if (j === 4) {*/
// Заменяем только элементы сверху и слева, если индекс j равен последнему
/* for (let x = Math.max(0, j - 1); x < j; x++) {
for (let y = Math.max(0, i - 1); y < Math.min(5, i + 2); y++) {
if (x !== j || y !== i) {
matrix[y][x] = "1";
}*/
// }
// }
// }
}
}
}
return matrix;
}
console.log(replaceSurrounding(matrix, q, w));
// console.log(replaceSurrounding(matrix, 11));
console.log(q);
console.log(w);
}
}
document.querySelector(".wrapper").addEventListene r ("click", handleClick);
</script>
</body>
</html>