[getElementById应当在加载DOM时具有空值

Question

我正在使用document.getElementById("statsInputMonth").innerHTML将span标记的值设置为另一个元素的innerHTML。我已经在代码中做过很多次了，但是当我在最后一个循环中这样做时，我从Firefox得到“ TypeError：document.getElementById（...）为null”。

我知道这与SO上的其他问题非常相似，但是我尝试使用window.onLoad并为DOM内容添加事件侦听器，并且此脚本正在页脚中加载，因此我认为元素应该通过代码运行。

我已经在循环和引起错误的特定行上方添加了注释，这是下面代码中的最后一个循环：

JavaScript：

document.addEventListener("DOMContentLoaded", function(event) {
//This is the loop that is having trouble:
    for (var k=1; k-1<=document.getElementsByClassName("stats").length; k++){
        console.log("k1:"+k);
        for (var l=1; l-1<document.getElementsByClassName("statsInput"+k).length; l++){
            console.log("    l1:"+l);
            document.getElementById("pop"+k+"."+l).innerHTML = document.getElementById("statsInput"+k+"."+l).innerHTML;
            console.log("pop"+k+"."+l);
        }
    }
    document.getElementById("popMonth").innerHTML = document.getElementById("statsInputMonth").innerHTML;
});

HTML：

<div class="statsMain parallax">
<div class="statsBG">
<h2 class="colorWhite textCenter">Incident Statistics</h2>
<div class="split">
<div class="leftSplit">
<div class="statsContent">
<h3 class="stats">November 2019 Incident Type</h3>
<canvas id="statsByType" role="img" width="500px" height="400px" aria-label=""></canvas>
[ada_popup id="4"]
</div>
<!-- end statsContent-->

</div>
<!--end leftSplit-->
<div class="rightSplit">
<div class="statsContent">
<h3 class="stats">Average Arrival Time by Station (in seconds)</h3>
<canvas id="statsByStation" role="img" width="500px" height="400px" aria-label=""></canvas>
[ada_popup id="6"]
</div><!-- end statsContent-->

</div><!--end rightSplit-->

</div>
<!--end div.split-->
<div class="split">
<div class="leftSplit">
<div class="statsContent">
<h3>Incidents by Station</h3>
<canvas id="myChart" role="img" width="400px" height="400px" aria-label=""></canvas>
[ada_popup id="2"]

</div><!--end statsContent-->

</div><!--end leftSplit-->

<div class="rightSplit">
<div class="statsContent">
<h3 class="stats">Incidents by Unit</h3>
<canvas id="statsByUnit" role="img" width="500px" height="400px" aria-label=""></canvas>
[ada_popup id="7"]
</div><!-- end statsContent-->
</div>
</div><!--end split-->

<div class="statsContent">
<h3 class="stats">Incidents by Month</h3>
<h4>November 2018 - November 2019</h4>
<canvas id="statsByMonth" role="img" width="1000px" height="400px" aria-label=""></canvas>
[ada_popup id="8"]
</div>
<p class="disclaimer">Powered by <a href="https://www.chartjs.org/">Chart.js</a></p>
</div><!--end statsBG-->
</div><!--end div.stats-->

<div id="statsInput" class="statsInput">
<!--ENTER VALUES FOR THE FIRE DISTRICT'S STATISTICS HERE-->
<!--ONLY ENTER WHOLE NUMBERS BETWEEN THE <span> TAGS, DO NOT ADD '%', SPACES, OR ANYTHING ELSE-->
<!--FORMAT TIMES AS ##:##-->

Incidents by Type:
    For the month of: <span id="statsInputMonth">November</span>
    Rescue &amp; EMS: <span id="statsInput1.1" class="statsInput1">420</span>
    False Alarm/Call: <span id="statsInput1.2" class="statsInput1">28</span>
    Good Intent Call: <span id="statsInput1.3" class="statsInput1">48</span>
    Service Call: <span id="statsInput1.4" class="statsInput1">30</span>
    Hazardous Condition (No Fire): <span id="statsInput1.5" class="statsInput1">11</span>
    Fire: <span id="statsInput1.6" class="statsInput1">9</span>
    Other: <span id="statsInput1.7" class="statsInput1">1</span>

Average Arrival Time:
    Station 1: <span id="statsInput2.1" class="statsInput2">3:47</span>
    Station 2: <span id="statsInput2.2" class="statsInput2">4:09</span>
    Station 3: <span id="statsInput2.3" class="statsInput2">5:13</span>
    Station 4: <span id="statsInput2.4" class="statsInput2">4:13</span>

Incidents by Station:
    Station 1: <span id="statsInput3.1" class="statsInput3">216</span>
    Station 2: <span id="statsInput3.2" class="statsInput3">173</span>
    Station 3: <span id="statsInput3.3" class="statsInput3">48</span>
    Station 4: <span id="statsInput3.4" class="statsInput3">110</span>

Incidents by Unit:
    Engine 211: <span id="statsInput4.1" class="statsInput4">109</span>
    Engine 212: <span id="statsInput4.2" class="statsInput4">192</span>
    Engine 221: <span id="statsInput4.3" class="statsInput4">187</span>
    Engine 231:<span id="statsInput4.4" class="statsInput4">67</span>
    Engine 241: <span id="statsInput4.5" class="statsInput4">117</span>
    Ladder 219: <span id="statsInput4.6" class="statsInput4">24</span>
    Battalion 2: <span id="statsInput4.7" class="statsInput4">42</span>

Incidents by Month:
    November: <span id="statsInput5.1" class="statsInput5">547</span>
    December: <span id="statsInput5.2" class="statsInput5">539</span>
    January: <span id="statsInput5.3" class="statsInput5">647</span>
    February: <span id="statsInput5.4" class="statsInput5">589</span>
    March: <span id="statsInput5.5" class="statsInput5">675</span>
    April: <span id="statsInput5.6" class="statsInput5">670</span>
    May: <span id="statsInput5.7" class="statsInput5">568</span>
    June: <span id="statsInput5.8" class="statsInput5">544</span>
    July: <span id="statsInput5.9" class="statsInput5">563</span>
    August: <span id="statsInput5.10" class="statsInput5">651</span>
    September: <span id="statsInput5.11" class="statsInput5">569</span>
    October: <span id="statsInput5.12" class="statsInput5">646</span>
</div>

Answer 1

[我可以看到您正在使用document.getElementsByClassName("statsInput"+k)来查找具有class="statsInput1"，class="statsInput2"等的元素，而我只能看到类似class="statsInput"的类。

我不确定您在做什么，但是似乎您要么错过了HTML元素类上的1, 2, 3..，要么本来打算在每个循环中仅在JavaScript上使用document.getElementsByClassName("statsInput")，因为是包含所有statsInput数据的容器。