title: How to addEventListener to table cells
body: <p>I'want to add an eventListener to the table cells so each time a table cell is clicked to execute a function . </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var getDaysInMonth = function (year, month) {
      return new Date(year, month, 0).getDate();
  }
  
  
  
  var calendar = {
      month: function () {
          var d = new Date();
          return d.getMonth() + this.nextMonth;
      },
  
      year: function () {
          var y = new Date();
          return y.getFullYear();
      },
  
      nextMonth: 1,
      
      cellColor: 'white',
      
  }
  
  
  
  var loopTable = function () {
      var daysInMonth = getDaysInMonth(calendar.year(), calendar.month());
      var table = document.getElementById('myTable');
      var rows = table.rows;
      var l = 1;
      var month = calendar.month();
      var year = calendar.year();
      var firstDay = new Date(year + "-" + month).getDay();
      var currentDay = new Date().getDay();
      var dayOfMonth = new Date().getDate();
  
   
      for (let i = 1; i &lt; rows.length; i++) {
  
          if (rows[i] == rows[1]) {
  
              var k = 1;
  
              for (let j = firstDay; j &lt; rows[i].cells.length; j++) {
  
                  if (k === dayOfMonth &amp;&amp; calendar.nextMonth === 1) {
                      rows[i].cells[j].style.backgroundColor = calendar.cellColor;
                  
  
                  }
  
                  if (k &lt;= daysInMonth) {
                      rows[i].cells[j].innerHTML = k;
                      k++
                  }
  
              }
          } else {
              for (let j = 0; j &lt; rows[i].cells.length; j++) {
                  if (k === dayOfMonth &amp;&amp; calendar.nextMonth === 1) {
                      rows[i].cells[j].style.backgroundColor = calendar.cellColor;
                  }
                  if (k &lt;= daysInMonth) {
                      rows[i].cells[j].innerHTML = k;
                      k++
                  }
              }
          }
      }
  }
  
  loopTable();
  clickCell();
  
  function monthTitle() {
  
      var monthsArray = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec.'];
      monthNum = calendar.month();
      var monthName = monthsArray[calendar.month() - 1] + '' + calendar.year();
      var title = document.getElementById('calendarTitle');
      var nextArrow = document.getElementById('nxt');
      var leftArrow = document.getElementById('prev');
  
    
      if (monthName === ('Dec.' + '' + calendar.year())){
          xmas();
      }
      if (monthNum &gt;= 12) {
          nextArrow.className += ' inactiveLink';
      } else if (monthNum &lt;= 1) {
          leftArrow.className += ' inactiveLink';
      } else {
          nextArrow.classList.remove('inactiveLink');
          leftArrow.classList.remove('inactiveLink');
      }
  
      title.innerHTML = '';
      var titleNode = document.createTextNode(monthName);
      title.appendChild(titleNode);
  
  
  }
  monthTitle();
  
  function nextMonth() {
      clearTable();
      calendar.nextMonth += 1;
      monthTitle();
      loopTable();
  }
  
  function previousMonth() {
      clearTable();
      calendar.nextMonth -= 1;
      monthTitle();
      loopTable();
  }
  
  function clearTable() {
      var table = document.getElementById('myTable');
      var rows = table.rows;
  
      for (var i = 1; i &lt; rows.length; i++) {
          cells = rows[i].cells;
          for (var j = 0; j &lt; cells.length; j++) {
              if (cells[j].innerHTML = '') {
                  cells[j].style.display = 'none';
              }
              cells[j].innerHTML = '';
              cells[j].style.backgroundColor = '#D9534F';
              cells[j].style.emptyCells = 'hide';
          }
      }
  }
  
  var next = document.getElementById('nxt');
  var previous = document.getElementById('prev');
  var table = document.getElementById('myTable');
  var cell = table.rows;
  next.addEventListener('click', nextMonth);
  previous.addEventListener('click', previousMonth);
  
  
  
  function clickCell() {
      var row = document.getElementById('myTable').rows;
      
      for (var i = 0; i &lt; row.length; i++) {
          for (var j = 0; j &lt; row[i].cells.length; j++ ) {
         
              row[i].cells[j].addEventListener('click', function(){
         console.log('click');
              })
          }
      }
  }
  clickCell();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
              background-color: rgb(0, 121, 191);
          }
          
          table {
              width: 50%;
              background-color: #D9534F;
              border: 1px solid white;
              padding: 10px;
              padding-bottom: 20px;
              font-size: 25px;
              border-radius: 25px;
              position: relative;
              margin: auto;
          }
          
          td {
              border: 1px solid white;
              text-align: center;
              font-weight: 600;
              font-size: 20px;
              padding: 20px;
          }
          
          th {
              height: 50px;
          }
          
          .calArrows {
              text-decoration: none;
              color: white;
              font-size: 35px;
          }
          
          #nxt {
              font-size: 30px;
              position: absolute;
              top: 0;
              right: 25%
          }
          
          #prev {
              font-size: 30px;
              position: absolute;
              top: 0;
              left: 25%;
          }
          
          #calendarTitle {
              font-family: 'Indie Flower', cursive;
              font-weight: 600;
              font-size: 25px;
              color: white;
          }
          
          .inactiveLink {
              cursor: not-allowed;
              pointer-events: none;
               
          }
          
          #myTable {
              empty-cells: hide;
          }
          
          .xmasDec {
              width: 90%;
              height: 70%;
              position: absolute;
              top: -10%;
              left: 5%;
          }
          
          #calWraper {
              position: relative;
          }
          
          #myCan {
              position: absolute;
              top: 0;
              left: 10%;
              width: 90%;
              height: 70%;
              opacity: 0, 5;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;canvas class="myCan" width="100" height="100"&gt;&lt;/canvas&gt;
      &lt;div id="calWraper"&gt;
          &lt;table id="myTable"&gt;
              &lt;caption id="calendarTitle"&gt;Test&lt;/caption&gt;
              &lt;tr&gt;
                  &lt;th&gt;Sun&lt;/th&gt;
                  &lt;th&gt;Mon&lt;/th&gt;
                  &lt;th&gt;Tue&lt;/th&gt;
                  &lt;th&gt;Wed&lt;/th&gt;
                  &lt;th&gt;Thur&lt;/th&gt;
                  &lt;th&gt;Fri&lt;/th&gt;
                  &lt;th&gt;Sat&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;canvas id="myCan" width="200" height="200" style="background-color: transparent"&gt;&lt;/canvas&gt;
              &lt;a href="#" id="prev" class="calArrows"&gt;&lt;i class="fa fa-arrow-left" &gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a href="#" id="nxt" class="calArrows"&gt;&lt;i class="fa fa-arrow-right" &gt;&lt;/i&gt;&lt;/a&gt;
  
  
  
      &lt;/div&gt;
  
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried by creating a function that it will loop through rows and cells and add the eventListener to each  . But it seems that its not working , its working on random instances which is really strange behavior . Here is the function i create: </p>
  
  <pre><code>function clickCell() {
      var row = document.getElementById('myTable').rows;
   for (var i = 0; i &lt; row.length; i++) {
          for (var j = 0; j &lt; row[i].cells.length; j++ ) {
                      console.log(row[i].cells[j].innerHTML);
              row[i].cells[j].addEventListener('click', function(){
                      console.log('click');
              })
          }
      }
  }
  </code></pre>