调试json javascript-无法将属性“innerHTML”设置为null

所以我一辈子都不明白为什么我总是 未捕获的TypeError:无法将属性“innerHTML”从第29行开始设置为null，该行显示var stats4。我试图将其应用于ID，但只有stats1、2、3起作用。我试着复制和粘贴第一部分，并改变周围的东西。我不明白

我的全部代码都在这里-jsfiddle.net/kx4s5egk

var request;
if (window.XMLHttpRequest) {
  request = new XMLHttpRequest();
} else {
  request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'stats.json');
request.onreadystatechange = function() {
  if ((request.readyState===4) && (request.status===200)) {

  var items = JSON.parse(request.responseText);

  var stats1 = items[0][0];
  document.getElementById("stats1").innerHTML =
    "<p>" + stats1.countTxt + "</p><p>" + stats1.participantsTxt + "</p><p class='count-blue1'>" + stats1.participantCount + "</p>";

  var stats2 = items[0][1];
  document.getElementById("stats2").innerHTML =
    "<p>" + stats2.countTxt + "</p><p>" + stats2.participantsTxt + "</p><p class='count-blue2'>" + stats2.participantCount + "</p>";


  var stats3 = items[0][2];
  document.getElementById("stats3").innerHTML =
    "<p>" + stats3.countTxt + "</p><p>" + stats3.participantsTxt + "</p><p class='count-blue3'>" + stats3.participantCount + "</p>";


  var stats4 = items[1][0];
  document.getElementById("stats4").innerHTML =
    "<p>" + stats4.countTxt + "</p><p>" + stats4.participantsTxt + "</p><p class='count-blue1'>" + stats4.participantCount + "</p>";

  var stats5 = items[1][1];
  document.getElementById("stats5").innerHTML =
    "<p>" + stats5.countTxt + "</p><p>" + stats5.participantsTxt + "</p><p class='count-blue2'>" + stats5.participantCount + "</p>";


  var stats6 = items[1][2];
  document.getElementById("stats3").innerHTML =
    "<p>" + stats6.countTxt + "</p><p>" + stats6.participantsTxt + "</p><p class='count-blue3'>" + stats6.participantCount + "</p>";



  }
}
request.send();

---

我注意到您的javascript代码中有一些东西有点不合常规，可能会把事情搞砸

你把所有东西都放在一个window.onload函数中，没关系。 但是在onload函数中，您有两个对jquery函数$document.ready的单独调用，它与window.onload等效，但可能更可靠

你的一个电话是以 $document.ready 另一个开始是 jQuerydocument.ready

尝试将包括window.onload函数在内的所有函数缩减为单个$document.ready函数。

---

您可以将一些内容提取到单独的函数中，但可以从$document内部调用它们。ready

出现错误消息的原因是您试图寻址一个不存在的DOM元素。您已经为三个项目编写了足够的HTML代码，并尝试处理六个项目

像这样的东西更容易实现，尽管用jQuery编码可能效率较低

坚持使用硬编码HTML，您可以执行以下操作：

$.getJSON('stats.json').then(function(data) {
    var i, j, n, stats;
    for(i=0, n=1; i<data.length; i++) {
        for(j=0; j<data[i].length; j++, n++) {
            stats = data[i][j];
            $("#stats" + n).html("<p>" + stats.countTxt + "</p><p>" + stats.participantsTxt + "</p><p class='count-blue'" + (j+1) + ">" + stats.participantCount + "</p>");
        }
    }
});

但是，通过动态创建更多HTML DOM节点，您可以做得更好：

//First, a tempate for your item entries
var tpl = '<div class="grid1-3">' +
    '<div class="%icon"></div>' +
    '<div class="number_style %count-blue"></div>' +
    '<div class="stats">%stats</div>' +
    '</div>';

$.getJSON('stats.json').then(function(data) {
    var i, j, jj, stats, _tpl;
    for(i=0; i<data.length; i++) {
        for(j=0, jj=1; j<data[i].length; j++, jj++) {
            stats = data[i][j];
            _tpl = tpl
                .replace('%icon', 'icon' + jj)
                .replace('%count-blue', 'count-blue' + jj)
                .replace('%stats', "<p>" + stats.countTxt + "</p><p>" + stats.participantsTxt + "</p><p class='count-blue'" + jj + ">" + stats.participantCount + "</p>");
            $("#items").append(_tpl);
        }
    }
});

---

我相信我还没有解决每一个方面，所以毫无疑问还有一些工作要做

您的文档中是否有id为stats4的元素？我想您需要检查文档中是否存在stats4元素是的，但当我将stats 4-5应用于id时，所有信息都会消失。可能是因为我用的是sass/指南针。但现在它对stats1-3很好。最奇怪的是，当我输入id stats4时，它跳转到未捕获的TypeError：无法设置stats1第15行null的属性'innerHTML'。我不明白你能不能创建一个拼图的JSFIDLE示例？