0

Hi

I think what Im trying to do is possible, just not sure how...

On a button click - Ive created an object, with some properties in it.

If I want to access those properties when clicking another button... how do I do that?

function build() {
	var circ = new circle('5');
}

//equation object
function circle(r) {
	this.radius = r;
	this.area = findArea;
}

function findArea() {
	var answer = this.radius * this.radius * 3.14;
	return answer;
}

how would I call a function which returns circ.area() on another button click, if the first Button calls build()?

2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by Airshow
0

Life,

There are many ways to formulate something like this in Javascript. Here's one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Circle Object Demo</title>
<script>
function Circle(radius) {//By convention we give contructor functions an Initial-capital letter
	// ***********************
	// *** Private members ***
	// ***********************
	radius = (!radius) ? 0 : radius;//private variable
	var diameter;//private variable
	var area;//private variable

	// **********************
	// *** Public members ***
	// **********************
	this.setRadius = function(r) {//public method to set private variables
		r = (!r) ? 0 : r;
		if(Number(r).toString() == r) {
			radius = r;
		}
		else {
			radius = 0;
			alert('Value must be a number');
		}
		diameter = 2 * radius;
		area = Math.PI * Math.pow(radius, 2);
	};
	this.getDiameter = function() { return diameter; }//public method to access private variable
	this.getArea = function() { return area; }//public method to access private variable
	this.getRadius = function() { return radius; }//public method to access private variable (for completeness)
	
	// **********************
	// *** Initialisation ***
	// **********************
	this.setRadius(radius);//Immediate call to initialise diameter and area
}

onload = function() {//This is triggered as soon as the page's Javascript and HTML have been fully loaded
	var radiusField       = document.getElementById('radius');
	var diameterField     = document.getElementById('diameter');
	var areaField         = document.getElementById('area');
	var setRadiusButton   = document.getElementById('setRadius');
	var getDiameterButton = document.getElementById('getDiameter');
	var getAreaButton     = document.getElementById('getArea');
	var circ = new Circle(radiusField.value);
	setRadiusButton.onclick   = function(){ circ.setRadius(radiusField.value); };
	getDiameterButton.onclick = function(){ diameterField.value = circ.getDiameter(); };
	getAreaButton.onclick     = function(){ areaField.value = circ.getArea().toFixed(5); };
};
</script>
</head>

<body>

<div id="wrapper">
	<input id="radius" type="text" size="3" value="5" />&nbsp;<button id="setRadius">Set Radius</button><br />
	<input id="diameter" type="text" size="3" disabled />&nbsp;<button id="getDiameter">Get Diameter</button><br />
	<input id="area" type="text" size="8" disabled />&nbsp;<button id="getArea">Get Area</button><br />
</div>

</body>
</html>

Note how we put just one member (Circle) into the global namespace. If we wanted, we could have zero global members by moving Circle inside the onload function. It would still work. Non-pollution of the global namespace is an issue as Javscript gets more and more complex/extensive.

The user interface is not perfect because it tells a lie after setting a new radius but before "Get Diameter" and "Get Area" are clicked. In practise we would probably choose to update the diameter and area fields automatically when "Set Radius" is clicked.

You can have fun adapting the code the make it work that way if you like.

Airshow

Edited by Airshow: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.