Question

所以我无法理解为什么我会一直得到我的生活未捕获的TypeError：无法设置属性'innerHTML'为null，从第29行开始，它显示为“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();

Answer 1

我在你的javascript代码中注意到了一些事情，这些事情有点不正统，可能搞砸了。

你拥有 window.onload（）功能中的所有内容，没关系。但是在onload函数中你有两个单独的调用jquery函数 $（document）.ready （这相当于，但可能比window.onload更可靠）。

你的一个电话是开头的的 $（文件）。就绪而另一个开始于的 jQuery的（文件）。就绪

尝试将所有内容（包括window.onload（）函数）减少为单个 $（document）.ready 函数。你可以把一些东西放到单独的函数中，但是从$（document）.ready
里面调用它们

Answer 2

错误消息的原因是您尝试解决不存在的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>");
        }
    }
});

<强> DEMO

但是，您可以通过动态创建更多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);
        }
    }
});

<强> DEMO

我确信我没有解决所有问题，因此毫无疑问仍有一些工作要做。

debug json javascript - 无法设置属性＆＃39; innerHTML＆＃39;为null

2 个答案: