未捕获（承诺）TypeError：无法将属性'innerHTML'设置为null

Question

我了解到存在与此问题类似的问题。我花了一些时间仔细研究它们。但是，这里的实现与我研究的某些情况有些不同。好消息是我的第四列，即运行总计列，正在正确显示我想要的数据。一切正常（正确计算并显示），那么为什么我的应用程序无法正常运行？我会很感激的。谢谢。

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

如果添加以下检查以确保定义了cell.nextElementSibling，那么这应该可以解决您的问题：

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;
      }
    })
  }