Форум

Димитр · #1 (**permalink**) 02.08.2024, 09:26

В массиве все элементы = 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>

ksa · #2 (**permalink**) 02.08.2024, 10:24

Сообщение от Димитр

В массиве все элементы = 0. При клике по квадрату в сетке grid получаем ID Diva и в этой координате вокруг значения элементов меняются на 3.

Предложу такой вариант...

<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>
</div>


<script>
const arr = Array.from({length: 5}, _ => new Array(5).fill(0))
arr.forEach((a, i) => a.forEach((_, j) => {
	const o = document.createElement('div')
	o.dataset.i = i
	o.dataset.j = j
	grid.insertAdjacentElement('beforeend', o)
}))
grid.addEventListener('click', e => {
	const o = e.target.closest('[data-i]')
	if (!o) return
	const r = +o.dataset.i
	const c = +o.dataset.j
	for (let i = r - 1; i <= (r + 1); i++) {
		for (let j = c - 1; j <= (c + 1); j++) {
			if (i === r && j === c) continue
			if (arr[i][j] === undefined) continue
			arr[i][j] = 3
			grid.querySelector(`[data-i='${i}'][data-j='${j}']`).textContent = 3
		}
	}
})

</script>

Димитр · #3 (**permalink**) 02.08.2024, 12:19

Спасибо!! Но на некоторых квадратах выдает ошибку.
В нижнем левом, к примеру, main.js:31 Uncaught TypeError: Cannot read properties of undefined (reading '-1')
at HTMLDivElement.<anonymous> (main.js:31:23)

рони · #4 (**permalink**) 02.08.2024, 14:19

Димитр,

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .wrapper {
            display: grid;
            width: 220px;
            height: 220px;
        }

        #grid {
            display: grid;
            grid-template-columns: repeat(var(--columns, 5), auto);
            grid-template-rows: repeat(var(--rows, 5), auto);
            width: 220px;
            height: 220px;
        }

        #grid>div {
            height: 42px;
            width: 42px;
            background-color: #38d929;
            border: solid 1px white;
            text-align: center;
            line-height: 42px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div id="grid"></div>
    </div>
    <script>
        let rows = 5;
        let columns = 8;
        grid.style.setProperty('--rows', rows);
        grid.style.setProperty('--columns', columns);
        const arr = Array.from({
            length: rows
        }, _ => Array.from({
            length: columns
        }, _ => {
            const o = document.createElement('div')
            grid.insertAdjacentElement('beforeend', o)
            return 0;
        }))
        let divs = Array.from(document.querySelectorAll('#grid > div'));
        grid.addEventListener('click', e => {
            const o = e.target.closest('#grid > div');
            if (!o) return;
            let ii = divs.indexOf(o);
            const r = ii / columns | 0;
            const c = ii % columns;
            for (let i = r - 1; i <= r + 1; i++) {
                if (i < 0 || i == rows) continue
                for (let j = c - 1; j <= c + 1; j++) {
                    if (j < 0 || j == columns) continue
                    if (i === r && j === c) continue
                    arr[i][j] = 3;
                    let k = i * columns + j;
                    divs[k].textContent = 3
                }
            }
        })
    </script>
</body>

</html>

Димитр · #5 (**permalink**) 02.08.2024, 16:40

Да, все нормально!!! Спасибо!!!
А что значит const r = ii / columns | 0;
Вертикальная линия?

рони · #6 (**permalink**) 02.08.2024, 18:07

Сообщение от Димитр

Вертикальная линия?

хак - получение целой части числа или удаление дробной.

Цитата:

Так как битовые операции отбрасывают десятичную часть, то их можно использовать для округления.

Округление

почти тоже самое, что Math.trunc()

Димитр · #7 (**permalink**) 02.08.2024, 22:41

Спасибо!!

Димитр · #8 (**permalink**) 04.08.2024, 18:51

А как сделать, чтобы были не div в ячейках массива, а нули?

рони · #9 (**permalink**) 04.08.2024, 23:43

Сообщение от Димитр

А как сделать, чтобы были не div в ячейках массива, а нули?

???
есть два массива: arr и divs, arr для значений, divs для элементов.

Димитр · #10 (**permalink**) 05.08.2024, 09:07

У меня не получается связать мой массиы с матрицей.
[
[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, 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, 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, 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, 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, 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], [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, 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, 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, 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, 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, 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], [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, 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, 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, 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, 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, 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], [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, 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, 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, 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, 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, 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], [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, 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, 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, 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, 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, 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], [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, 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, 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, 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, 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, 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],
[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, 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, 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, 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, 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, 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], [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, 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, 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, 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, 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, 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], [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, 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, 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, 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, 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, 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], [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, 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, 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, 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, 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, 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], [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, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]

];

Форум

Справочник

Discord чат

Курсы javascript