Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null

Question

I understand there are questions similar to this issue. And I have taken the time to look through them. But the implementation here is a little different than in some of the cases I looked at. The good news here is my fourth column, the running totals column, is correctly displaying the data I want. Everything is working (correctly calculated and displaying) so why is my app held up on this? I'd appreciate it. Thanks.

calculateRunningTotals(){
        var attendantTotalCell = 0;
        var total = 0;
        var totalCell="";
        var totalsCells = document.querySelectorAll("td:nth-child(3)");

        totalsCells.forEach(function(cell, index){
          console.log("The contents of the totals cell " + cell.innerText);
          totalCell = cell.innerText;
          attendantTotalCell = totalCell.replace(/[^0-9-.]/g, '');
          total = parseInt(attendantTotalCell) + parseInt(total);
          console.log("Attendant Total Cell is: " + attendantTotalCell);
          console.log("Attendant Total is " + total);
          cell.nextElementSibling.innerHTML = total;
        })
      }

Answer 1

If you add the following check to ensure that cell.nextElementSibling is defined, then this should resolve your problem:

calculateRunningTotals(){
    var attendantTotalCell = 0;
    var total = 0;
    var totalCell="";
    var totalsCells = document.querySelectorAll("td:nth-child(3)");

    totalsCells.forEach(function(cell, index){
      console.log("The contents of the totals cell " + cell.innerText);
      totalCell = cell.innerText;
      attendantTotalCell = totalCell.replace(/[^0-9-.]/g, '');
      total = parseInt(attendantTotalCell) + parseInt(total);
      console.log("Attendant Total Cell is: " + attendantTotalCell);
      console.log("Attendant Total is " + total);

      /* Add the following check to ensure nextElementSibling is defined
         before attempting to access it */
      if(cell.nextElementSibling) {
        cell.nextElementSibling.innerHTML = total;
      }
    })
  }