Using Javascript to embed an onClick event to an HTML div

Question

I'm trying to make an interactable and configurable grid using divs as their cells.

To first give a bit of context on this part of the code, I'm basically just repeating td's in HTML output then appending a specific amount of divs into the td's/rows (cellID is just a method for decorating the div names);

var table, row, div;
table = document.createElement('table');
for (var i=0; i < rows; i++)
{
    row = document.createElement('td');
    row.id = "row-" + i;
    for (var j=0; j < cols; j++)
    {
        div = document.createElement('div');
        div.id = cellID(i, j);
        row.append(div);
    }
    table.append(row);
}

Let's say that: -rows = 4 and -cols = 2 | The output result on the user's end would be this :

Now my current problem that I'm trying to figure out is how to make every repeated div be given the onClick() event so that an event occurs when you click on the boxes, here is what I tried to make this work :

div.addEventListener("click", null); //This part didn't work for me, though to be honest, I don't really know what to replace the null with
div.getElementById(div.id).onclick = function() { OnClick() }; (OnClick is a test method to see if it works, however this one just rejects an error, saying that "div.getElementById" is not a function, so I don't know what's up with that.)

These things I tried were all things that had been recommended throughout, but I don't know what else could make it work.

What do you think the problem may be there?

Gotcha! I will take note of that in the future. And also your answer helped fix the problem in my code, thank you very much for your time! — VoodooJazz_
– VoodooJazz_, Commented Oct 29, 2021 at 22:08

Barmar · Accepted Answer · 2021-10-29 21:56:12Z

2

div.addEventListener() should work.

But you need to create valid DOM structure. Rows are tr, cells are td. You can put the div in the td, or just use the td directly.

let rows = 2,
  cols = 4;
var table, row, div;
table = document.createElement('table');
for (var i = 0; i < rows; i++) {
  row = document.createElement('tr');
  row.id = "row-" + i;
  for (var j = 0; j < cols; j++) {
    let cell = document.createElement("td");
    div = document.createElement('div');
    div.id = cellID(i, j);
    div.addEventListener("click", function() {
      console.log('Clicked on', this.id);
    });
    div.innerText = div.id;
    cell.append(div);
    row.append(cell);
  }
  table.append(row);
}
document.body.appendChild(table);

function cellID(i, j) {
  return `cell-${i}-${j}`;
}

answered Oct 29, 2021 at 21:56

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Javascript to embed an onClick event to an HTML div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related