Menu
I have the following Javascript in my main.js file:
//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 + "<br />array count: " + array.length + "<br />";
for (var i = 0; i < array.length; i++) {
combine = "";
SUMMONER_ID = array[i];
getStuff(SUMMONER_ID, combine, API_KEY, div, i);
}
}
function getStuff(SUMMONER_ID, combine, API_KEY, div, count) {
var Topuser = SUMMONER_ID;
$.ajax({
url: 'https://euw.api.pvp.net/api/lol/euw/v2.5/league/by-summoner/' + SUMMONER_ID + '/entry?api_key=' + API_KEY,
type: 'GET',
dataType: 'json',
async: false,
data: {},
success: function (json) {
var user = Topuser;
if (typeof json[user][0].queue != "undefined") {
if (json[user][0].queue == "RANKED_SOLO_5x5") {
combine = json[user][0].tier + " " + json[user][0].entries[0].division + " - " + json[user][0].entries[0].wins + " Wins " + json[user][0].entries[0].losses + " losses";
div.innerHTML = div.innerHTML + "<br />" + 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 + "<br />" + count + ": " + user + " " + "UNRANKED";
}
}
});
}
And the HTML is as follows:
<div class="container">
<h2>Wins/Losses</h2>
<canvas id="winLossChart" width="400" height="200"></canvas>
</div>
As the title suggests, I am getting Uncaught TypeError: Cannot read property 'getContext' of null and I'm not entirely sure what the issue is. If I had to guess I'd say it was trying to reference something that wasn't there but I'm not 100% sure on if I am correct and how to fix it. Any advice would be great.
304
The "Cannot read property 'getContext' of null" error occurs when calling the getContext method on a null value. To solve the error, make sure the JS script tag is loaded after the HTML is declared and the id of the element exists in the DOM.
The getContext() function is the function that you use to get access to the <canvas> tags 2D drawing functions. As of April 2014, there are two types of context that are available to you: 2d and webgl . These provide you with the API that you use to draw on the <canvas> .
getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported, or the canvas has already been set to a different context mode.
The line that is throwing the error is
var winLossChart = document.getElementById('winLossChart').getContext('2d');
It is saying that document.getElementById('winLossChart') does not exist.
This would be because your script is being interpreted before the elements have finished being created in the DOM.
You could either kick off the script in a window.onload function:
window.onload = function() {
createChartWinLoss();
}
Or you could put the script tag itself as the last element in the body element of your html file.
<body>
<div class="container">
<h2>Wins/Losses</h2>
<canvas id="winLossChart" width="400" height="200"></canvas>
</div>
<script src="myscript.js"></script>
</body>
Either solution would mean that the main entry point of your code (createChartWinLoss) would only happen after the other elements on the page, including the canvas, were created.
As a general process towards solving these kinds of problems, when you saw the exception in your Javascript console, you should have been able to open the stack trace, which would have led you to the fact that the error originated on the line var winLossChart = ..., which would have made you more likely to have been able to discover the source of the problem.
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
