View Full Version : Question regarding variable scope

05-27-2004, 06: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:


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

05-28-2004, 07: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.

05-28-2004, 07: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.


05-28-2004, 07: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.


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

var myscript=document.createElement('script');

05-28-2004, 05:10 PM
Ahh, I see. Funny, you are the one I saw do it the better way the first time. Thanks for the refresher.


05-28-2004, 06: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.

05-28-2004, 08: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:

<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 - ";

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