PDA

View Full Version : 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:


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
<!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:


<!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:


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):


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:


<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/side/sightings/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