未捕獲（承諾）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;
      }
    })
  }