Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   При клике меняются элементы массива (https://javascript.ru/forum/events/86030-pri-klike-menyayutsya-ehlementy-massiva.html)

Димитр 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 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>

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

рони 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>

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

рони 02.08.2024 18:07
Цитата:
Сообщение от Димитр
Вертикальная линия?
хак - получение целой части числа или удаление дробной.
Цитата:
Так как битовые операции отбрасывают десятичную часть, то их можно использовать для округления.
Округление



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

Димитр 02.08.2024 22:41
Спасибо!!

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

рони 04.08.2024 23:43
Цитата:
Сообщение от Димитр
А как сделать, чтобы были не div в ячейках массива, а нули?
???
есть два массива: arr и divs, arr для значений, divs для элементов.

Димитр 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]


];


Часовой пояс GMT +3, время: 01:18.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице