CODEWITHSUNDEEP
javascriptjquery
ST80
ST80

Reputation: 3903

javascript pass variable to another file

I want to pass a variable to another file but until now I'm not sure what I'm doing wrong.

So lets say in file1.js I have:

$('.selector').on('click', function (e) {
  var getClicked = $(e.currentTarget).find('img').attr('data-type');

  if (getClicked === "360") {
    function detect360Src() {
        var imgUrl = $(this).find('img').attr('src');
    }
    view360.init();
  }
})

Now, I want to pass the variable imgUrl and its value/data to file2.js, inside its init-function:

init: function() {
// imgURL variable/data here
}

How can I achieve that? Thanks in advance

Upvotes: 0

Views: 1810

Answers (4)

Domino
Domino

Reputation: 6778

When JS is executed within a browser context, variables declared in the global scope or initialized without declaration (without the var keyword) are stored and read in the window object automatically. So if you create a variable say, at the top of your file, it's still going to be accessible in any other JS code that runs on the page.

However, because such variables pollute the global namespace, it's a good idea to create a container object which will store all shared data. At the top of all files, add something like:

myContainer = myContainer || {};

This creates the myContainer global object if it didn't exist, but it doesn't change anything if it did.

The fact that variables are global by default is why many libraries wrap themselves in a closure. To make sure that none of the variables in your code get overwritten by code from another file, you should do something like this:

myContainer = myContainer || {};

(function(){
    var someVariable; // not accessible in other files
    myContainer.sharedVariable = 10; // accessible in all files
})();

Note that this still isn't "safe" in the sense that myContainer is global and could be overwritten by any code similar to myContainer = something.

Upvotes: 2

stackoverfloweth
stackoverfloweth

Reputation: 6917

if both files belong to the same website try using LocalStorage or SessionStorage

http://www.w3schools.com/html/html5_webstorage.asp

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}

Upvotes: 1

Seeker89
Seeker89

Reputation: 292

Long version: Read this document on variable scopes in JavaScript

TL;DR:

The scope of a variable in JavaScript is the function it was declared in (or global scope, if it was declared outside of a body of any function).

So if you have code like this, the lifetime of that variable will be like so:

function detect360Src() {
  var imgUrl = $(this).find('img').attr('src');
  // imgUrl is in the scope
}
// imgUrl is out of scope

If you need to pass a variable between the two files (which itself is a warning sign), you will need to pass by a variable in the global scope.

But to avoid polluting the global namespace, it's a good idea to have your own wrapper (like many JS libs do):

// in the global scope:
var myLibContainer = mylibContainer || {}
// .. in file 1 attach things to it 
lyLibContainer.imgData = ....
// .. in file 2 get access
console.log(myLibContainer.imgData)

Upvotes: 0

David Panart
David Panart

Reputation: 656

Save the value in the global window variable.

It might not be the most beautifull way, but that is how Meteor.js proceed so...

At least you are sure to be able to check the var existence and reuse it anywhere.

Upvotes: 0

Related Questions