CODEWITHSUNDEEP
javascripthtmlcss-grid
NyctophobianDream
NyctophobianDream

Reputation: 11

Why can't i move the divs in my grid when i add them through a for loop in JS?

I made this 10x10 grid consisting of 100 divs where one of them is supposed to be able to move on input (one row/column up, left, down, right per button click). To do this i added a for loop to add all these divs so they dont clutter my HTML file. I noticed the div (its named "you" in the code) stays in place, though. So I tried the ugly version of 100 div elements in my HTML and it worked just fine, despite there seemingly being no difference. I even removed the divs altogether and the movement still worked fine. But as soon as the for loop is added again, the div just stays in place again. To be clear: I'm not looking for other solutions or workarounds, I want to learn what I did wrong and why this doesn't work.

I tried to find the mistake by console.logging the position before and after inputs, as well as the gridRow/gridColumn values but everything looks like it should be working: the position values change after every input and the gridRow/gridColumn values reflect that. I changed CSS properties of the divs and the grid container around to make sure there's no problem there, I tried seperating the eventListener-call from the .innerHTML call that adds the divs...none of it got me any closer to a conclusion.There are no error messages either to follow up on.

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 += `<div class="empty-div"></div>`;
  }
  upBtn.addEventListener("click", moveUp);
  leftBtn.addEventListener("click", moveLeft);
  downBtn.addEventListener("click", moveDown);
  rightBtn.addEventListener("click", moveRight);
}
.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;
}
<body onload=initiate()>
  <div id="grid-container" class="grid-container">
    <div id="you" class="you">
      <p>You</p>
    </div>
    <div id="me" class="me">
      <p>Me</p>
    </div>
  </div>
  <div class="controls">
    <div class="upper-controls">
      <button id="up-btn" class="control-btn">UP</button>
    </div>
    <div class="lower-controls">
      <button id="left-btn" class="control-btn">LEFT</button>
      <button id="down-btn" class="control-btn">DOWN</button>
      <button id="right-btn" class="control-btn">RIGHT</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>

Upvotes: 1

Views: 33

Answers (0)

Related Questions