Calling a function using a button

**Beriaal** · 01-23-2012 05:23 PM

Hi there,
beginner here.

I'm trying to create a very simple webpage using Googles Geocharts which is written in JavaScript.

More specifically I'm using this script from Geochart which simply outputs a world map in which the US is highlighted:

Code:

<head>

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
	
	<script type='text/javascript'>
	  
		function geochart() {
		  
			google.load('visualization', '1', {'packages': ['geochart']});
			google.setOnLoadCallback(drawMarkersMap);

			function drawMarkersMap() {
				var data = new google.visualization.DataTable();
					data.addColumn('string', 'City');
					data.addColumn('number', 'color');
					data.addRows([['USA', 1]]);

				var options = {
					region: 'world',
					displayMode: 'regions',
					colorAxis: {colors: ['white', 'red']},
					backgroundColor: 'cyan',
					legend: 'none',
					height: 347,
					width: 556
					};

				var chart = new google.visualization.GeoChart(document.getElementById('MAPHERE'));
					chart.draw(data, options);
			};
		}
		
	</script>
</head>

When calling the function in my page's body with:

Code:

<body>
<div id='MAPHERE'></div>
<script>geochart();</script>
</body>

it outputs the map just fine.

But when instead I try to call the function using an event listener:

Code:

<body>
<div id='MAPHERE'></div>
<button type="button" value="Highlight US" onclick="geochart()">
</body>

it doesn't work.

Any idea why?

I'm basically doing this.

What am I doing wrong?

Thank you.

**Beriaal** · 01-24-2012 05:30 AM

Anybody? Please, I'm stuck until I understand why this isn't working.

**xelawho** · 01-24-2012 10:26 AM

it's something about the callback function that I don't really understand, but you can get it working this way, anyway...

Code:

<html>
<head>

</head>
<body>

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
	
	<script type='text/javascript'>
	  var data,options;
	google.load('visualization', '1', {'packages': ['geochart']});
	google.setOnLoadCallback(drawMarkersMap);

			function drawMarkersMap() {
				data = new google.visualization.DataTable();
					data.addColumn('string', 'City');
					data.addColumn('number', 'color');
					data.addRows([['USA', 1]]);

				options = {
					region: 'world',
					displayMode: 'regions',
					colorAxis: {colors: ['white', 'red']},
					backgroundColor: 'cyan',
					legend: 'none',
					height: 347,
					width: 556
					};
				
			};
	
function show(){
var chart = new google.visualization.GeoChart(document.getElementById('MAPHERE'));
					chart.draw(data, options);
}
	</script>
	<div id='MAPHERE'></div>
<button type="button" onclick="show()">Highlight US</button>

</body>
</html>

**Beriaal** · 01-24-2012 05:00 PM

Thank you very much!

Thread: Calling a function using a button

Thread Tools

Display

Calling a function using a button

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions