iTomTom iTomTom - 4 months ago 23
Javascript Question

How to resolve Uncaught TypeError: Cannot set property 'outerHTML' of null?

The error is not disabling the page from rendering correct results; however, it is quite annoying! I am showing the HTML and JavaScript portion of the code where the error is originating from. Please assist me with this as I have been attempting to resolve the issue for hours now without any effect!

Code:



google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333', ],
['Silver', 10.49, 'silver'],
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ]
]);

var options = {
title: "Density of Precious Metals, in g/cm^3",
bar: {groupWidth: '95%'},
legend: 'none',
};

var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(chart_div);

google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);
});

chart.draw(data, options);
document.getElementById('png').outerHTML = '<a href="' + chart.getImageURI() + '" target="_blank"><span class="glyphicon glyphicon-print"></span></a>';

}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Chart 1 -->
<button class="btn btn-primary" onclick="drawChart()" data-toggle="modal" data-target="#myModal">Chart</button>

<!-- Modal 1 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<div id="chart_div"></div>
</div>
<div class="modal-footer" style="text-align: center;">
<div id='png'></div>
</div>
</div>
</div>
</div>




Answer

tl;dr

Replace outerHTML with innerHTML

(sort of) an explanation

You have this line inside a function that's executed multiple times. After the first time, the #png element no longer exists, so subsequent calls (like clicking the chart button) cause it to error. Placing the content inside the element will ensure that it's always there on subsequent calls.

google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

	var data = google.visualization.arrayToDataTable([
		['Element', 'Density', { role: 'style' }],
		['Copper', 8.94, '#b87333', ],
		['Silver', 10.49, 'silver'],
		['Gold', 19.30, 'gold'],
		['Platinum', 21.45, 'color: #e5e4e2' ]
	]);

	var options = {
		title: "Density of Precious Metals, in g/cm^3",
		bar: {groupWidth: '95%'},
		legend: 'none',
	};

	var chart_div = document.getElementById('chart_div');
	var chart = new google.visualization.ColumnChart(chart_div);

	google.visualization.events.addListener(chart, 'ready', function () {
		chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
		console.log(chart_div.innerHTML);
	});

	chart.draw(data, options);
	document.getElementById('png').innerHTML = '<a href="' + chart.getImageURI() + '" target="_blank"><span class="glyphicon glyphicon-print"></span></a>';

}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Chart 1 -->
<button class="btn btn-primary" onclick="drawChart()" data-toggle="modal" data-target="#myModal">Chart</button>

<!-- Modal 1 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
				<div id="chart_div"></div>
			</div>
			<div class="modal-footer" style="text-align: center;">
				<div id='png'></div>
			</div>
		</div>
	</div>
</div>

Comments