如何解决Uncaught TypeError：无法设置null的属性'outerHTML'？

Question

错误并未禁止页面呈现正确的结果;但是，这很烦人！我正在显示错误源自的代码的HTML和JavaScript部分。请帮我解决这个问题，因为我一直试图解决这个问题几个小时而没有任何影响！

代码：

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 1

TL;博士

将outerHTML替换为innerHTML

（某种）解释

你在一个多次执行的函数中有这一行。第一次之后，#png元素不再存在，因此后续调用（如单击图表按钮）会导致错误。将内容放在元素中将确保它在后续调用中始终存在。

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>