Variable Scoping in include files

John Yopp · Aug 25, 2005

I seem to be have problems with what appears to be variable scoping. If
I define a constant in my main HTML page, I do not seem to be able to
reference it within functions in JavaScript include files.

For instance, I receive the following errors:

Error: CONST0 is not defined
Source File: test1.js
Line: 3

Error: CONST0 is not defined
Source File: test2.js
Line: 4

Error: document.getElementById("div1") has no properties
Source File: jstest1.html
Line: 18

=========== BEGIN jstest1.html ======================
<html>
<head>
<script type="text/Javascript" src="test1.js"></script>
<script type="text/Javascript" src="test2.js"></script>

<script type="text/javascript" language="JavaScript">

</script>

</head>
<body bgcolor="white">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

</body>
</html>
=========== END jstest1.html ======================

=========== BEGIN test1.js ======================

const CONST1 = "This is from test1";

document.getElementById("div1").innerHTML = "This is from
test2.html:<br>CONST0 = " + CONST0 + "<br>" +
"CONST1 = " + CONST1 + "<br>" +
"CONST2 = " + CONST2 + "<br>" ;

=========== END test1.js ======================

=========== BEGIN test2.js ======================
const CONST2 = "This is from test2";

document.getElementById("div1").innerHTML = "This is from
test1.js:<br>CONST0 = " + CONST0 + "<br>" +
"CONST1 = " + CONST1 + "<br>" +
"CONST2 = " + CONST2 + "<br>" ;
=========== END test2.js ======================

Richard Cornford · Aug 25, 2005

John said:
I seem to be have problems with what appears to be variable
scoping. If I define a constant in my main HTML page,
I do not seem to be able to reference it within functions
in JavaScript include files.

The code that appears to be referencing this 'constant' does not appear
to take the form of functions. If the included files attempt to
reference the 'constant' in inline code then that code should not be
executed until after the 'constant' has been defined. The order in which
SCRIPT elements appear in a page is the order in which their global
declarations and inline code is evaluated (unless the DEFER attribute is
used, and implemented in the browser environment).

<script type="text/Javascript" src="test1.js"></script>
<script type="text/Javascript" src="test2.js"></script>

So move the following SCRIPT element above the previous two.

<script type="text/javascript" language="JavaScript">

The language attribute is redundant in the company of the type
attribute.

<!--

This 'hide scripts from older browsers' HTML-style comment is redundant
as those 'older browsers' are now long-since dead and gone.

const CONST0 = "foo";

<snip>

'const' is a reserved word in ECMA 262, it is a JavaScript(tm)
extension, introduced at about version 1.4 (as I recall). It will be a
syntax error in ECMA 262 implementations that do not follow
JavaScript(tm) 1.4 extensions (which is most of them).

Richard.

web.dev · Aug 25, 2005

John said:
I seem to be have problems with what appears to be variable scoping. If
I define a constant in my main HTML page, I do not seem to be able to
reference it within functions in JavaScript include files.
[snip]

<script type="text/javascript" language="JavaScript">
<!--
const CONST0 = "foo";

There is no "const" keyword in javascript, although it is a reserved
word. So, just say:

var CONSTO = "foo";

Be sure to remember not to change the value.

document.getElementById("div1").innerHTML = 'This is from
test1.html:<br>CONST0 = ' + CONST0 + "<br>" +
'CONST1 = ' + CONST1 + "<br>" +
'CONST2 = ' + CONST2 + "<br>" ;
//-->
</script>
[snip]
const CONST1 = "This is from test1"; [snip]
const CONST2 = "This is from test2";

Same applies to both above.

Hope this helps.

ASM · Aug 25, 2005

John said:
I seem to be have problems with what appears to be variable scoping. If
I define a constant in my main HTML page, I do not seem to be able to
reference it within functions in JavaScript include files.

For instance, I receive the following errors:

Error: CONST0 is not defined

yes CONSTO is not a variable

Source File: test1.js
Line: 3

Error: CONST0 is not defined

same error

Source File: test2.js
Line: 4

Error: document.getElementById("div1") has no properties

see bellow

Source File: jstest1.html
Line: 18

=========== BEGIN jstest1.html ======================
<html>
<head>
<script type="text/Javascript" src="test1.js"></script>
<script type="text/Javascript" src="test2.js"></script>

<script type="text/javascript" language="JavaScript">
<!--
const CONST0 = "foo";

var CONSTO = 'foo';

document.getElementById("div1").innerHTML = 'This is from
test1.html:<br>CONST0 = ' + CONST0 + "<br>" +
'CONST1 = ' + CONST1 + "<br>" +
'CONST2 = ' + CONST2 + "<br>" ;

You can't call at this time this div 'div1'
that appears only bellow

Try putting all this script in end of page
of set a function to do this job
this function will be called when page is loaded :

function init() {
document.getElementById("div1").innerHTML = 'This'+
' is from test1.html:<br>CONST0 = ' + CONST0 + "<br>" +
'CONST1 = ' + CONST1 + "<br>" +
'CONST2 = ' + CONST2 + "<br>" ;
}
onload = init;

//-->
</script>

</head>
<body bgcolor="white">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

</body>
</html>
=========== END jstest1.html ======================

=========== BEGIN test1.js ======================

const CONST1 = "This is from test1";

var CONST1 = "This is from test1";
not the moment to call this div (same error as above)

Help with code	0	Jun 12, 2022
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Javascript not hiding nested elements simultaneously	2	Apr 5, 2023
Help with my responsive home page	2	Dec 14, 2022
I am trying to make an audio player, how do I get the selected file to be playable?	5	Mar 29, 2022
Help me sort out this script	1	Oct 17, 2023
What "might" I be doing wrong with this snippet?	6	Sep 25, 2023

Variable Scoping in include files

John Yopp

Richard Cornford

web.dev

ASM

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads