How to add a OnClick listener spefic to this table?

Question

I am setting up a quality-control for my internship and for that I need a table filled with buttons with ClickListeners. Now here is the Problem: How do I add a OnClick Listener for each of the buttons?

The onClick method does not have to do anything really. I have played with this table all day now.

    <div id="Table"></div>

<script>
        function addTable() {

            var abc = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
                'AA', 'AB', 'AC', 'AD', 'AE', 'AF', 'AG', 'AH', 'AI', 'AJ', 'AK', 'AL', 'AM', 'AN', 'AO', 'AP', 'AQ', 'AR', 'AS', 'AT', 'AU', 'AV', 'AW', 'AX', 'AY', 'AZ'
            ];

            var myTableDiv = document.getElementById("Table");
            var table = document.createElement('TABLE');
            table.border = '1';
            var tableBody = document.createElement('TBODY');
            table.appendChild(tableBody);

            var Y_Length = parseInt(localStorage.getItem("YWert")) + 1;

            for (var i = 0; i < Y_Length; i++) {
                var tr = document.createElement('TR');
                tableBody.appendChild(tr);


                for (var j = 0; j < localStorage.getItem("XWert"); j++) {
                    var td = document.createElement('TD');
                    td.width = '75';

                    if (i == 0 && j != 0) {
                        td.innerHTML = abc[j - 1];

                    } else {
                        var button = document.createElement("button");
                        button.innerHTML = "";
                        td.appendChild(button);
                    }

                    if (j == 0 && i != 0) {
                        td.innerHTML = i;
                    }


                    tr.appendChild(td);
                }
            }



            myTableDiv.appendChild(table);

        }
        addTable();
    </script>

Answer 1

When you create your button:

var button = document.createElement("
button.innerHTML = "";
td.appendChild(button);

Just add

button.addEventListener("click", myFunction);    

before td.appendChild(button)

Answer 2

There are two ways you can do this.

The first is to provide an event listener for every button:

 var abc = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'AA', 'AB', 'AC', 'AD', 'AE', 'AF', 'AG', 'AH', 'AI', 'AJ', 'AK', 'AL', 'AM', 'AN', 'AO', 'AP', 'AQ', 'AR', 'AS', 'AT', 'AU', 'AV', 'AW', 'AX', 'AY', 'AZ' ]; function clickHandler(evt) { var btn = evt.target; var col = btn.getAttribute('col'); var row = btn.getAttribute('row'); alert('clicked on cell '+col+row); } function addTable() { var X_Length = 10;//localStorage.getItem("XWert"); var Y_Length = 10;//parseInt(localStorage.getItem("YWert")) + 1; var myTableDiv = document.getElementById("Table"); var table = document.createElement('TABLE'); var tableBody = document.createElement('TBODY'); table.appendChild(tableBody); for (var i = 0; i < Y_Length; i++) { var tr = document.createElement('TR'); tableBody.appendChild(tr); for (var j = 0; j < X_Length; j++) { var td = document.createElement('TD'); if (j == 0 && i != 0) { td.innerHTML = i; } else if (i == 0 && j != 0) { td.innerHTML = abc[j - 1]; } else { var button = document.createElement("button"); button.setAttribute('col', abc[j - 1]); button.setAttribute('row', i); button.addEventListener('click', clickHandler); // <--- Event listener for each button button.innerHTML = ""; td.appendChild(button); } tr.appendChild(td); } } myTableDiv.appendChild(table); } addTable(); 

 th, td { border: 1px solid #999; margin: 0; padding: 5px; width: 75px; } table { border-collapse: collapse; } 

 <div id="Table"></div> 

And the second is to provide one for the entire table and filter on the event to make sure it was the button that was clicked. This way uses a little less memory and a lot fewer event listeners. It also does works in additional rows or columns are added after initial render

 var abc = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'AA', 'AB', 'AC', 'AD', 'AE', 'AF', 'AG', 'AH', 'AI', 'AJ', 'AK', 'AL', 'AM', 'AN', 'AO', 'AP', 'AQ', 'AR', 'AS', 'AT', 'AU', 'AV', 'AW', 'AX', 'AY', 'AZ' ]; function clickHandler(evt) { var btn = evt.target; if (btn.nodeName === 'BUTTON') { var col = btn.getAttribute('col'); var row = btn.getAttribute('row'); alert('clicked on cell '+col+row); } } function addTable() { var X_Length = 10;//localStorage.getItem("XWert"); var Y_Length = 10;//parseInt(localStorage.getItem("YWert")) + 1; var myTableDiv = document.getElementById("Table"); var table = document.createElement('TABLE'); table.addEventListener('click', clickHandler); // <--- One event listener for the entire table. var tableBody = document.createElement('TBODY'); table.appendChild(tableBody); for (var i = 0; i < Y_Length; i++) { var tr = document.createElement('TR'); tableBody.appendChild(tr); for (var j = 0; j < X_Length; j++) { var td = document.createElement('TD'); if (j == 0 && i != 0) { td.innerHTML = i; } else if (i == 0 && j != 0) { td.innerHTML = abc[j - 1]; } else { var button = document.createElement("button"); button.setAttribute('col', abc[j - 1]); button.setAttribute('row', i); button.innerHTML = ""; td.appendChild(button); } tr.appendChild(td); } } myTableDiv.appendChild(table); } addTable(); 

 th, td { border: 1px solid #999; margin: 0; padding: 5px; width: 75px; } table { border-collapse: collapse; } 

 <div id="Table"></div> 

Also, conciser moving code that only needs to run once outside of your function so it does not have to run each time the function is called.