Почему я не могу переместить DOV в свою сетку, когда добавляю их через петлю в JS? [дублировать] ⇐ Html

[Anonymous]

Я сделал эту сетку 10x10, состоящую из 100 дел, где один из них должен иметь возможность перемещаться на вход (одна строка/столбец вверх, влево, вниз, вправо на нажмите кнопку). Чтобы сделать это, я добавил для цикла, чтобы добавить все эти DIV, чтобы они не загромождали мой HTML -файл.
Я заметил, что Div (его назван «вы» в коде), хотя. Поэтому я попробовал уродливую версию 100 Div Elements в моем HTML, и это сработало просто отлично, несмотря на то, что, по -видимому, нет разницы. Я даже вообще снял DOV, и движение все еще работало нормально. Но как только петля снова добавлен, Div просто снова остается на месте.
, чтобы быть ясным: я не < /strong> ищу другие решения или обходные пути, я хочу узнать, что Я сделал неправильно, и почему это не работает. как это должно быть Работа: значения позиции изменяются после каждого ввода, а значения сетки/стержня отражают это. Я изменил свойства CSS Divs и контейнер сетки вокруг, чтобы убедиться, что там нет проблем, я попробовал отделить SeventListener-Call от вызова .innerhtml, который добавляет DOV ... ни один из них не приблизил меня к выводу. Нет никаких сообщений об ошибках, чтобы следить за. class = "Snippet-Code">

Код: Выделить всё

const gridContainer = document.getElementById("grid-container");
const you = document.getElementById("you");
const me = document.getElementById("me");
const upBtn = document.getElementById("up-btn");
const leftBtn = document.getElementById("left-btn");
const downBtn = document.getElementById("down-btn");
const rightBtn = document.getElementById("right-btn");

let mePosition = {
x: 10,
y: 10
};
let youPosition = {
x: 1,
y: 1
}

const moveUp = () => {
if (youPosition.y > 1) {
youPosition.y--;
you.style.gridRow = youPosition.y;
}
console.log(youPosition);
console.log(you.style.gridRow + " " + you.style.gridColumn);
}
const moveLeft = () => {
if (youPosition.x > 1) {
youPosition.x--;
you.style.gridColumn = youPosition.x;
}
console.log(youPosition);
console.log(you.style.gridRow + " " + you.style.gridColumn);
}
const moveDown = () => {
if (youPosition.y < 10) {
youPosition.y++;
you.style.gridRow = youPosition.y;
}
console.log(youPosition);
console.log(you.style.gridRow + " " + you.style.gridColumn);
}
const moveRight = () => {
if (youPosition.x < 10) {
youPosition.x++;
you.style.gridColumn = youPosition.x;
}
console.log(youPosition);
console.log(you.style.gridRow + " " + you.style.gridColumn);
}

const initiate = () => {
for (let i = 0; i < 98; i++) { // this somehow fixes the divs in place and nothing will move; if the exact same divs are added manually it works, same if there are none
gridContainer.innerHTML += ``;
}
upBtn.addEventListener("click", moveUp);
leftBtn.addEventListener("click", moveLeft);
downBtn.addEventListener("click", moveDown);
rightBtn.addEventListener("click", moveRight);
}< /code>
.grid-container {
width: 545px;
height: 545px;
background-color: rgb(211, 206, 133);
display: grid;
grid-template-columns: repeat(10, 50px);
grid-template-rows: repeat(10, 50px);
margin: 50px auto 0;
padding: 5px;
gap: 5px;
border: 4px solid rgb(62, 62, 62);
}

.empty-div {
background-color: beige;
border: 1px black solid;
box-sizing: border-box;
}

.you {
grid-row: 1;
grid-column: 1;
background-color: rgb(162, 143, 120);
border: 1px black solid;
box-sizing: border-box;
}

.me {
grid-row: 10;
grid-column: 10;
background-color: rgb(162, 143, 120);
border: 1px black solid;
box-sizing: border-box;
}< /code>



You

Me




UP

LEFT
DOWN
RIGHT

Подробнее здесь: https://stackoverflow.com/questions/794 ... loop-in-js