storing js variables to use later

Question

lifeworks 5 Junior Poster

14 Years Ago

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()?

javascript

2 Contributors
1 Reply
103 Views
2 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2010-03-29T04:13:03+00:00

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