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.area = findArea;
}

function findArea() {
}

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

2
Contributors
1
2
Views
8 Years
Discussion Span
Last Post by Airshow

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>
<title>Airshow :: Circle Object Demo</title>
<script>
function Circle(radius) {//By convention we give contructor functions an Initial-capital letter
// ***********************
// *** Private members ***
// ***********************
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) {
}
else {
}
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 ***
// **********************
}

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

<body>

<div id="wrapper">
<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.