如何使用JavaScript函数为每个div分配坐标值？

Question

I've a function that generates div s and appends them to a 'container' div, and it assigns each div with a unique ID. I use a for loop to run the function and fill the 'container' div , which is just wide enough so that the tiles being added create a square.

The following is my code to generate a div :

function cdiv(ele) {
  var div = document.createElement("div");
  div.className = 'tiles';
  div.id = 'div' + id++; // det unique id and increment id value
  div.addEventListener("click", clr);
  div.dataset.taps = x;
  div.dataset.xcoordinate = 0;
  div.dataset.ycoordinate = 0;
  ele.appendChild(div);
}

I use the following to contain the div s being created:

var div = document.getElementById('container');

for (i = 0; i < 100; i++) {
  for (b = 0; b < 100; b++) { 
    cdiv(div);
  }
}

Note - my 'container' div is 5000px wide so that if each div being created is 50px wide, I will then have a square grid of div s.

My problem is being able to assign each div a coordinate. I need a function that I can use to pass through to the x/y coordinate tag s in each div being created, and give them a value depending on where the div is located in the 'grid'. The number of tiles is variable so please don't give a solution for just a 100 by 100 grid.

Answer 1

Not sure if I understand the question fully.

Would this work?

function cdiv(ele, xcoord, ycoord) {
  var div = document.createElement("div");
  div.className = 'tiles';
  div.id = 'div' + id++; // det unique id and increment id value
  div.addEventListener("click", clr);
  div.dataset.taps = x;
  div.dataset.xcoordinate = xcoord;
  div.dataset.ycoordinate = ycoord;
  ele.appendChild(div);
}

Then

var div = document.getElementById('container');

for (i = 0; i < 100; i++) {
  for (b = 0; b < 100; b++) { 
    cdiv(div, i, b);
  }
}