Question regarding variable scope

Valhalla

05-27-2004, 05:46 PM

First, I should start by saying I'm new to JavaScript, but I know Java pretty well, so picking up JS hasn't been too bad. There is one thing I am fairly perplexed about, however.

I am working on a site redesign and we are using a mix of CSS and JavaScript. There are 5 separate JavaScript files in our site:

template.js
header.js
footer.js
menu.js
footernav.js

Currently, things work (this site was designed by another student), but I have found that there are many redundancies and inefficiencies with the way the files interact, so I'm trying to restructure it.

Enough background for now - here's my problem:

It is my understanding that when you write:

var variablename = "";

at the top of a .js document, that variable is a global variable and should be visible to all functions within that file. However, I am finding that some functions within the files can't see modifications to the variable. I'll give an example:

in the file header.js, I have the following code

var menuList="";

function drawHeader() {

document.write("<script type='text/javascript' src='http://www.uwsa.edu/" + directory + "menu.js'></script>");

...(some more code)....

}

The menu.js file then repeatedly calls a function from the header.js file (the one I just showed the code from). The purpose of these calls is to continually update a string and later print it out. Here is the code from that function:

function menuEntry(menuTitle, menuAddress, page)
{
menuList=menuList+"<a href='"+menuAddress+"'>"+menuTitle+"</a>";
}

However, what I have discovered is that after the menu.js file has completed executing, menuList does not hold onto the value it had while menuList was executing. I have verified that the fuction was working correctly by putting "document.write" statements into the menuEntry function shown above.

However, when I put a document.write statement on the menuList variable immediately after the <script> tag, the value has been lost and it prints nothing.

I'm sorry if this is unclear - I can send/post the entire files if needed. Thanks for any help with this

kwhubby

05-28-2004, 06:16 AM

I think you may have to post or link to the entire thing. The only thing I can think of is that maybe menuEntry is being run and making the menuList local before header.js is loaded completely and declares menuList global.

Basscyst

05-28-2004, 06:41 AM

It may also be that you are writing the </script> tag into the page. This will actually end the script at the point it is written in the js file, at least in my experience. If I remember correctly I resolved it by creating 2 variables and putting them together

var x='</scri';
var y='pt>';
var nScript=x+y;

There is a better way to do this, saw it before but can't recall, maybe you just need to escape it \</script>. Not sure if it's the root of the problem but it might help. Makes sense with what you described.

Basscyst

glenngv

05-28-2004, 06:47 AM

There is a better way to do this, saw it before but can't recall, maybe you just need to escape it \</script>. Not sure if it's the root of the problem but it might help.

'.....<\/script>';

But the better way to dynamically add script is through DOM.

var myscript=document.createElement('script');
myscript.src="menu.js";
document.getElementsByTagName('head')[0].appendChild(myscript);

Basscyst

05-28-2004, 04:10 PM

Ahh, I see. Funny, you are the one I saw do it the better way the first time. Thanks for the refresher.

Basscyst

Valhalla

05-28-2004, 05:28 PM

Okay...thanks a lot for the responses. I'm going to try some things that were suggested and see if I can't alleviate my problem. If not, I will post more of the code.

Valhalla

05-28-2004, 07:48 PM

Okay! I've now determined that the problem was my understanding of how the javascript worked. I didn't understand that calling document.write(<some javascript here>); wasn't doing the same as writing each one out in the HTML - basically I forgot that I was still inside a script, so I hadn't reached the </script> tag before calling another - I think someone pointed that out.

However, now in each document I am left with something like this:

<html>
<head>
<META NAME="htdig-noindex">
<script type="text/javascript" src="../../../template/template-testadvising.js"></script>
<script type="text/javascript" src="../../../template/header-testadvising.js"></script>
<script type="text/javascript" src="../../../template/footer-testadvising.js"></script>
<script type="text/javascript" src="info.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="footerbar.js"></script>
<script type="text/javascript">
pageName = "Advisor Training";
title = "Advisor Training - ";
initialize();
</script>
</head>

I wish I could just make a call to the template-testadvising.js file and then have the template file set everything else up.

I think this is what you guys (or at least one of you) were referring to earlier in this thread- about dynamically writing script tags. I am not familiar with JavaScript to really know what you were talking about, so if there is any particular reference you could point me to so I could learn about it, or if you feel fine about explaining what you meant, I would greatly appreciate it.

Once again, thanks for the help, everyone