未捕獲的TypeError：無法讀取null的屬性'childNodes'

Question

不知道為什么我得到這個錯誤。 有關問題根源的閱讀資料似乎在元素加載之前執行JavaScript時存在，但是在我的情況下，我在body標簽上使用了onload函數。 JavaScript也在body標簽關閉之前。不確定是什么原因導致了此問題。 **錯誤對應於initLegend（）函數的第二行

這是行拋出錯誤

legendGroup = svgDoc.getElementById("legendGroup").childNodes;

碼

<body onload="init()">
<h1>Co2 Emissions</h1>
<div id="viz" style='margin-top: -5px;'></div>
<script type="text/javascript">

var changeArray = [-80,-60,-40,-20,0,20,40,60,80];
var colorArray = ["#053061", "#2166ac", "#4393c3", "#92c5de", "#F1F7FA", "#fddbc7", "#f4a582", "#d6604d", "#b2182b", "#67001f"];

    var legend;
    var legendGroup;
    svgDoc = document;

var svg_0 = d3.xml("svg_drawing.svg", "image/svg+xml", function(xml) {
    var importedNode = document.importNode(xml.documentElement, true);
    d3.select("#viz").node().appendChild(importedNode)});

    function initLegend()
{
  legend = svgDoc.getElementById("legend");
  legendGroup = svgDoc.getElementById("legendGroup").childNodes;
  // set text for headline
  var node = legend.childNodes.item(1);
  node.firstChild.nodeValue = currentMonth + currentYear;
  node = node.nextSibling.nextSibling;
  node.firstChild.nodeValue = legendHeadline;
  node = node.nextSibling.nextSibling;
  node.firstChild.nodeValue = legendLabelDecrease;
  node = node.nextSibling.nextSibling;
  node.firstChild.nodeValue = legendLabelIncrease1;
  node = node.nextSibling.nextSibling;
  node.firstChild.nodeValue = legendLabelIncrease2;

  // set legend items
  if(debug) { alert("legendGroup.length: " + legendGroup.length); }
  var rectInvariant = 0;
  var textInvariant = 0;
  for(var i=0; i<legendGroup.length; i++)
  {
    if(legendGroup.item(i))
    {
      if(legendGroup.item(i).nodeName == "rect")
      {
        legendGroup.item(i).setAttribute("fill",colorArray[rectInvariant++]);
      } else
      {
        if(legendGroup.item(i).nodeName == "text")
        {
          legendGroup.item(i).firstChild.nodeValue = changeArray[textInvariant++] + "%";
        }
      }
    }
  }
}


function init(){
initLegend()
};


</script>
</body>
</html>

SVG傳奇

 <g id="legend" transform="matrix(1 0 0 1 685 28)">
      <text id="legendHeadline" class="legendHeadline" x="87" y="-7">...</text>
      <text id="legendSubheadline" class="legendSubheadline" x="95" y="-7">...</text>
      <text id="decrease" class="legendLabel" x="-25" y="17">...</text>
      <text id="increase1" class="legendLabel" x="379" y="10">...</text>
      <text id="increase2" class="legendLabel" x="379" y="22">...</text>
      <g id="legendGroup" transform="matrix(1 0 0 1 0 8)">
        <rect x="0" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
        <text x="35" y="27" class="legendStyle">...</text>
        <rect x="35" y="0" width="35" height="10" stroke="#000000" stroke-width="1" fill="#FFFFFF" />
        <text x="70" y="27" class="legendStyle">...</text>
        <rect x="70" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
        <text x="105" y="27" class="legendStyle">...</text>
        <rect x="105" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
        <text x="140" y="27" class="legendStyle">...</text>
        <rect x="140" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
        <text x="175" y="27" class="legendStyle">...</text>
        <rect x="175" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
        <text x="210" y="27" class="legendStyle">...</text>
        <rect x="210" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
        <text x="245" y="27" class="legendStyle">...</text>
        <rect x="245" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
        <text x="280" y="27" class="legendStyle">...</text>
        <rect x="280" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
        <text x="315" y="27" class="legendStyle">...</text>
        <rect x="315" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
      </g>
    </g>

Answer 1

您只需將initLegend()調用移到回調處理程序中， initLegend()在它之后。 SVG的加載是異步的 ，並且窗口“ load”事件不會等待該事件完成。

像這樣編輯：

var svg_0 = d3.xml("svg_drawing.svg", "image/svg+xml", function(xml) {
    var importedNode = document.importNode(xml.documentElement, true);
    d3.select("#viz").node().appendChild(importedNode);
    initLegend();
});

未捕獲的TypeError：無法讀取null的屬性'childNodes'

問題描述

1 個解決方案

解決方案1
2 已采納 2015-11-09 22:10:57

未捕獲的TypeError：無法讀取null的屬性&#39;childNodes&#39;

問題描述

1 個解決方案

解決方案1 2 已采納 2015-11-09 22:10:57

未捕獲的TypeError：無法讀取null的屬性'childNodes'

解決方案1
2 已采納 2015-11-09 22:10:57