Question

I got this HTML page. I wanna access variables from 2 javascript files that has common variables. I gotta get values from these variables pertaining to the respective javascript. I tried loading them using <script> but when i access the js variables, it only get the values from the last js file, in other words, the last loaded js file overwrites the variable values and only these values are available to access. I’d really appreciate help on this one.

Thanks!!!

Answer 1

You need to namespace your variables or use variables with different names. What it sounds like you’re doing is the equivalent of:

var x = 'foo';
var x = 'bar';

console.log(x);

    > bar

Which should make sense. If you use namespaces though, things will work better for you. Consider two files, script-1.js and script-2.js:

// script-1.js
var s1 = {
    x:'foo'
}

// script-2.js
var s2 = {
    x:'bar'
}

…then…

console.log(s1.x);

    > foo

console.log(s2.x);

    > bar

That’s a rather trite example, of course.

EDIT

If you can’t change the files themselves do this – save off the values to some other name/object after loading script-1 but before loading script-2:

<script type="text/javascript" src="script-1.js"></script>

<script type="text/javascript">
    var s1 = {
        // Save off values here
        x:x,
        y:y
    }
</script>

<script type="text/javascript" src="script-2.js"></script>

// Then...
console.log(s1.x);  // will output the value from script-1.js
console.log(x);     // will output the value from script-2.js

Not pretty, but should work fine.