Chart.js-无法读取null的属性'getContext'

我的main.js文件中有以下Javascript :

//array object of API stuff

function createChartWinLoss(wins, losses) {

  var pieData = [
    {
      value: losses,
      color: "#F7464A",
      highlight: "#FF5A5E",
      label: "Losses"
    },
    {
      value: wins,
      color: "#46BFBD",
      highlight: "#5AD3D1",
      label: "Wins"
    }
  ];

  var pieOptiOns= {
    segmentShowStroke : false,
    animateScale : true
  }


  var winLossChart = document.getElementById('winLossChart').getContext('2d');
  new Chart(winLossChart).Pie(pieData, pieOptions);
}

//creates the chart with test data
createChartWinLoss();

function summonerLookUp() {
  var SUMMONER_ID = "";
  var API_KEY = "keyhere";
  var sumID = $("#theKey").val();
  var div = document.getElementById('stuff');
  var combine = "";
  var array = [sumID];
  var wins;
  var losses;

  div.innerHTML = div.innerHTML + "
array count: " + array.length + "
";
  for (var i = 0; i " + count + ": " + user + " " + combine;
          var wins = json[user][0].entries[0].wins;
          var losses = json[user][0].entries[0].losses;
          //populates chart with wins losses from api
          createChartWinLoss(wins,losses);
        }
      }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      var user = Topuser;
      console.log(errorThrown);
      if (errorThrown === "Not Found") {
        div.innerHTML = div.innerHTML + "
" + count + ": " + user + " " + "UNRANKED";
      }
    }
  });
}

HTML如下:

  
Wins/Losses
  

正如标题所示,我得到了Uncaught TypeError: Cannot read property 'getContext' of null,我不完全确定问题是什么.如果我不得不猜测我会说它试图引用那些不存在的东西,但我不是百分之百确定我是否正确以及如何解决它.任何建议都会很棒.

抛出错误的行是

var winLossChart = document.getElementById('winLossChart').getContext('2d');

据说这document.getElementById('winLossChart')不存在.

这是因为在DOM中创建元素之前,您的脚本正在被解释.

您可以在window.onload函数中启动脚本:

window.Onload= function() {
   createChartWinLoss();
}

或者您可以将脚本标记本身作为html文件的body元素中的最后一个元素.

  

    
Wins/Losses
    
  
  

这两种解决方案都意味着代码(createChartWinLoss)的主要入口点只会在页面上的其他元素(包括画布)创建之后发生.

作为解决这些问题的一般过程,当您在Javascript控制台中看到异常时,您应该能够打开堆栈跟踪,这会导致错误产生于该行var winLossChart = ...,这将是让你更有可能发现问题的根源.