js button generator with functions

Question

I got the code to generate the table with buttons i wanted, but i also want to get a "onlick="cell_id(" + j +"," + i ")" function within the <button> element using js.

The j and i variables are to mark the row and column where the click came from and also used to create the table.

the code:

function tableCreate() {
  var body = document.getElementsByTagName("body")[0];

  var tbl = document.createElement("table");
  var tblBody = document.createElement("tbody");

  for (var j = 0; j <= 10; j++) {
    var row = document.createElement("tr");

    for (var i = 0; i <10; i++) {
      var cell = document.createElement("td");
      var button = document.createElement("button");
      button.innerHTML = j +"-"+i;
      cell.appendChild(button);
      row.appendChild(cell);
    }
    tblBody.appendChild(row);
  }
  tbl.appendChild(tblBody);
  body.appendChild(tbl);
  tbl.setAttribute("border", "2");
}

function cell_id(x,y){
  window.alert('x:'+x+ ' y:'+y)
}

code from https://stackoverflow.com/a/61549235/12825970

@VLAZ i need help with using js to get a function in a button element — Hello, May 04 '20 at 11:42
I don't quite understand what the problem/question is, but I have a feeling you might be looking for [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). — domsson, May 04 '20 at 11:44
```button.addEventListener('onclick')``` track the button sense it has no id or anything to id it form the rest of the buttons — Hello, May 04 '20 at 11:48
`cellIndex` on table cell elements and `rowIndex` on table row elements exist. So this whole thing can be done by adding _one_ click handler to the table, checking if the event target was a `button`, and if so going up to the parent cell and row, and getting the respective index values from there - https://jsfiddle.net/7vdLekz2/ — CBroe, May 04 '20 at 12:11

Evan Trimboli · Accepted Answer · 2020-05-04T11:55:17.933

You can attach a listener to each button element:

function tableCreate() {
  var body = document.getElementsByTagName("body")[0];

  var tbl = document.createElement("table");
  var tblBody = document.createElement("tbody");

  for (var j = 0; j <= 10; j++) {
    var row = document.createElement("tr");

    for (var i = 0; i <10; i++) {
      var cell = document.createElement("td");
      var button = document.createElement("button");
      button.innerHTML = j +"-"+i;
      setupListener(button);
      cell.appendChild(button);
      row.appendChild(cell);
    }
    tblBody.appendChild(row);
  }
  tbl.appendChild(tblBody);
  body.appendChild(tbl);
  tbl.setAttribute("border", "2");
}

function setupListener(button, i, j) {
  button.addEventListener('click', () => {
    cell_id(button, i, j);
  });
}

function cell_id(button, x, y){
  msg('x:'+x+ ' y:'+y)
}

This approach works, but is expensive if you have a lot of buttons. For a more advanced approach, you can store the i and j as data attributes on the button, then use a single click event on the entire table. You can filter the events to check if they came from a "source" button. I'll leave that up to you if it's an option you want to pursue.

can it track the button it came from, its important for what im using it for — Hello, May 04 '20 at 11:53

js button generator with functions

1 Answers1