Transfer Variable between Functions

**Fighterfox** · 10-07-2011, 11:14 PM

I have a hunch this is possible somehow, and I need to do it!

I have a for loop with changing values inside a function. I essentially print out the values of the four loop (i=1, i=2, i=3) onto the screen, and when the user clicks on one of these values, I want a function to go off that makes a calculation based on that value.

So say that:

Code:

html=" ";
function list()
for(i==1,i<10,i++){
html+='<div onclick="evaluate(i)">' + i + '</div>';
}
document.write(html);

function evaluate(i){
var answer=i*i*3.14;
}
document.write(answer);

I know the syntax is wrong somewhere. Is there anyway to share values between functions?? I can't be creative enough... There HAS to be some way to do this. I know technically that a variable defined within a function can only be used within that function, but how can I get my problem to work?

Thanks so much in advance!

**jscheuer1** · 10-08-2011, 05:41 PM

Code:

<!DOCTYPE html>
<html>
<head>
<title>Pi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.pi {
	cursor: pointer;
}
</style>
</head>
<body>
<script type="text/javascript">
function list(){
	var html='';
	for(var i = 1; i < 10; ++i){
		html += '<div class="pi" onclick="list.calculate(this, ' + i + ')">' + i + '<\/div>\n';
	}
	document.write(html);

	list.calculate = function(el, i){
		var answer=i*i*3.14;
		el.firstChild.nodeValue += ' ans: ' + answer;
		el.style.cursor = 'text';
		el.onclick = function(){};
	};
}
list();
</script>
</body>
</html>

**Fighterfox** · 10-08-2011, 07:32 PM

Thanks so much! This brilliant code is wonderful and works well!!

The creativity is awesome...

**Fighterfox** · 10-09-2011, 12:37 AM

After a bit more work on this code, I found out that I am actually not trying to use iterations in the for loop as my value, I am trying to get the value of a tag from an XML file that directly relates to the number of iterations. So revising the code below gives me:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Pi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.pi {
	cursor: pointer;
}
</style>
</head>
<body>
<script type="text/javascript">
function list(){
	var html='';
	for(var i = 1; i < 10; ++i){
                answer=x["tag-name"] // x does not directly relate to i!!
		html += '<div class="pi" onclick="list.calculate(' + answer + ')">' + i + '<\/div>\n';
	}
	document.write(html);

	list.calculate = function(answer){
		document.write(answer);
	};
}
list();
</script>
</body>
</html>

How could I get a code like this to work? If it works, it only shows me the last value from the four loop (e.g. the value of x["answer"] corresponding to i=10). I want to get the value of x["answer"] at i=anything between 1 and 10.

Hopefully I've explained this well enough. I find this to be a really interesting challenge!

**jscheuer1** · 10-09-2011, 02:45 AM

The variable x is undefined. From what you're saying though, I would tend to think it's an xml document. However, the code shows no attempt at retrieving that document and making it available to be parsed by the code. If it were, there would have to be enough of "tag-name" in it to cover all i, and these would start ay 0 not 1. So something like:

Code:

function list(){
	var html='', answer;
	for(var i = 0; i < 9; ++i){
                answer = x.getElementsByTagName('tag-name')[i].firstChild.nodeValue;
                // x is assumed to be an xml doc, answer will be the text value of an element from it
                // assuming that element has a first child (hopefully an only child) which is a plain text node
		html += '<div class="pi" onclick="list.calculate(' + answer + ')">' + i + '<\/div>\n';
	}
	document.write(html);

	list.calculate = function(answer){
		document.write(answer); // this will (if the assumptions above are correct) work, but it will overwrite he page
	};
}
list();

I would use jQuery for this - especially for retrieving the xml doc and making it available for parsing. But there is generic javascript code that does the same thing, it's just more convoluted than I would ordinarily choose to write out. If you show me the xml doc, I will write up code that could be used. If you have non-jQuery code that you want to use for retrieving the the xml doc and making it available for parsing, show me that too. If it's servicable, I can use that instead of jQuery.

**Fighterfox** · 10-10-2011, 07:09 PM

Wow! I really appreciate your help!!

I actually had tweaked and modified the first code you gave me to get exactly the code you suggested! And that was exactly the code idea I was using when I first asked my question. But, if I've done it correctly, applying this code you suggested always returns the last value that was processed in the "for" loop. For example, in my code below, I always get d["com-name"] corresponding to i= the number of the last item in the XML file. You understand the second part of my problem, which I have now fixed. The first part of my problem is going back to request data corresponding to any random "i". I can now transfer that data to a new function, as you showed in the previous code. Now is it possible to go back and request data for the random "i" that you select?

So this is my code almost completely verbatim. I am actually using Google code (since I am building a Google Gadget, so I have just substituted document.write commands for the google code equivalents):

Code:

function displaySummary() {


var url = "http://ebird.org/ws1.1/data/obs/geo/recent?lng=-76.50&lat=42.46&dist=10&back=7&fmt=xml";

// url is requested and obtained through google code commands.  Essentially, response in the following line references the variable "url".

var itemList = response.getElementsByTagName("sighting");

for (var i = 0; i < itemList.length ; i++) {
  var d = getData(itemList.item(i));
  var comname = d["com-name"];
  html += "<td class='speciescolumn' onclick='displayNearby(" + comname + ")'>" + d["com-name"] + "</td>";
  html += "</tr></table></div>";
}
document.write(html);
}

function getData(n) {
var d = new Object();
var nodeList = n.childNodes;
for (var j = 0; j < nodeList.length ; j++) {
var node = nodeList.item(j);
d[node.nodeName] = node.firstChild.nodeValue;
} return d;
}

displayNearby = function(comname){
document.write(comname); // or rather, so I can request another URL using information from what I clicked on.
};


displaySummary();

I have used my older codes successfully for a number of applications and they worked wonderfully. It's only this one application where I want to click on one of the items printed to the screen that were generated by the for loop, and then get the value of that item from the XML database and use it in another function to request a new URL. Maybe this helps. If you can't get this, don't bother. It's just a really valuable trick for me that I'm looking to use a lot in the future. I really am grateful for your help so far, and would love to find an answer to this problem!! Thanks again!

**jscheuer1** · 10-10-2011, 08:47 PM

I find it hard to believe that code does anything. I set it up using the same xml doc (I made a local copy of it) and grabbed it and made it available for parsing using jQuery. The first error I got was:

html is not defined

After I fixed that, I got two other errors:

missing ) after formal parameter:
displayNearby(American Crow)

Fixed that and got:

displayNearby is not defined

Once that was fixed, it more or less worked:

Code:

<div id="content"></div>
<script type="text/javascript">
function displaySummary() {


var url = "http://ebird.org/ws1.1/data/obs/geo/recent?lng=-76.50&lat=42.46&dist=10&back=7&fmt=xml";

// url is requested and obtained through google code commands.  Essentially, response in the following line references the variable "url".

var itemList = response.getElementsByTagName("sighting");
var html = '<div><table>';
for (var i = 0; i < itemList.length ; i++) {
  var d = getData(itemList.item(i));
  var comname = d["com-name"];
  html += "<tr><td class='speciescolumn' onclick='displayNearby(\"" + comname + "\")'>" + d["com-name"] + "</td></tr>";
}
html += "</table></div>";

document.getElementById('content').innerHTML = html;
}

function getData(n) {
var d = new Object();
var nodeList = n.childNodes;
for (var j = 0; j < nodeList.length ; j++) {
var node = nodeList.item(j);
d[node.nodeName] = node.firstChild.nodeValue;
} return d;
}

displayNearby = function(comname){
document.write(comname); // or rather, so I can request another URL using information from what I clicked on.
document.close();
};


displaySummary();
</script>

Demo (using jQuery and my own copy of the xml file):

http://home.comcast.net/~jscheuer1/s...ings/sight.htm

Added Later:

There are still problems, like try clicking on Swainson's Thrush. But that can be fixed by escaping/unescaping the value. Also I think maybe you wanted more than one bird per row. If so, that can be arranged. And why bother having an onclick at all? It only overwrites the page with the name you just clicked on.

**Fighterfox** · 10-11-2011, 01:52 AM

Thanks a lot for the reply and work on this! I'm going to work hard at this and try to get it to work using your code! I really appreciate your help. Thanks so much...

-Zachary

Thread: Transfer Variable between Functions

Thread Tools

Search Thread

Transfer Variable between Functions

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions