Assigning onclick values to a button with tables

Question

The problem I am having with the code below is that when I click on any of the buttons in my table (generated entirely with javascript), the DivNumberString value is always 5_5. Any insight into why this is happening?

<!DOCTYPE HTML>
<html>
<body>
  <div id="TableForCountries" class="TableForCountries">
  </div>
  <script>
    function AddTable() {
        var TableDiv = document.getElementById("TableForCountries");
        var Table = document.createElement("table");
        Table.border = 1;
        TableDiv.appendChild(Table);

        var i, j;
        var NumCountries = 5;
        var NumSectors = 5;

        for (i = 0; i < NumCountries; i++) {
          var CurrentRow = Table.insertRow(i);
          for (j = 0; j < NumSectors + 1; j++) {
            var Cell = CurrentRow.insertCell(j);
            var SectorString = String(i + 1) + "_" + String(j);

            if (j == 0) {
              var CountryData = document.createElement("div");
              CountryData.id = SectorString;
              var AddOrDelete = "add";
              var CountryDataSelect = document.createElement("select");
              var AddButton = document.createElement("button");

              AddButton.onclick = function() {
                AddOrDeleteDiv("add", SectorString);
              };

              CountryData.appendChild(CountryDataSelect);
              CountryData.appendChild(AddButton);

              Cell.appendChild(CountryData);
            } else if (j == NumSectors) {

              var CountryData = document.createElement("div");
              var CountryDataSelect = document.createElement("select");
              CountryData.id = SectorString;
              var AddOrDelete = "add";

              var DeleteButton = document.createElement("button");
              DeleteButton.onclick = function() {
                AddOrDeleteDiv("delete", SectorString);
              };
              CountryData.appendChild(CountryDataSelect);

              CountryData.appendChild(DeleteButton);
              Cell.appendChild(CountryData);
            } else {
              var CountryData = document.createElement("div");
              var CountryDataSelect = document.createElement("select");
              var AddButton = document.createElement("button");

              AddButton.onclick = function() {
                AddOrDeleteDiv("add", SectorString);
              };
              var DeleteButton = document.createElement("button");

              DeleteButton.onclick = function() {
                AddOrDeleteDiv("delete", SectorString);
              };
              CountryData.appendChild(CountryDataSelect);
              CountryData.appendChild(AddButton);
              CountryData.appendChild(DeleteButton);
              Cell.appendChild(CountryData);
            }
          } //End of inner for    
        } //End of outer for     
      } //end of function


    function AddOrDeleteDiv(AddOrDelete, DivNumberString) {
      console.log(DivNumberString);
      var CountryNumber = parseInt(DivNumberString.charAt(0));
      var SectorNumber = parseInt(DivNumberString.charAt(2));

      if (AddOrDelete == "add") {
        document.getElementById(CountryNumber + "_" + String(SectorNumber + 1)).style.display = "inline";
      } else {
        document.getElementById(CountryNumber + "_" + SectorNumber).style.display = "none";
      }
    }

    AddTable();
  </script>
</body>
</html>

In your instance, an alternate solution to what is discussed in the linked duplicate is to change your `onclick` property declarations to using a text attribute. An example is to change your first `AddButton.onclick = function() {AddOrDeleteDiv("add", SectorString);};` to `AddButton.setAttribute('onclick','AddOrDeleteDiv("add", "' + SectorString + '");');`. Doing so will also accomplish what you appear to desire. Note that you never assign an ID to anything, so your attempt to change `document.getElementById().style.display` will result in an error — Makyen, Aug 08 '16 at 01:42
Using event delegation (other question), then choosing what to do based on [`event.target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target) is arguably better. Also, in the event handler (now, or with event delegation) you already have a reference to the clicked element (either/both `this` or `event.target`). You could find the element on which to change the `style` based on its relation to the target (e.g. the first `
` that is an ancestor of the that node (see [`.parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)). No need to `parseInt`. — Makyen, Aug 08 '16 at 02:04

Assigning onclick values to a button with tables

0 Answers0