How to check if an variable in Javascript is defined in another Javascript file and display an alert if it isn't?

Question

I have an JavaScript framework for making some HTML5 elements work in older browsers and letting users create their own elements. The function for an user to create their own element is used on another Javascript file, for example:

element('myElement').appendStyleColor('red').type('text');

For making sure the user is creating the element with my framework, I've created a variable that the user defines at the end of their file. For example:

using = "myFramework";

I had to create a test to display an alert if the variable 'using' doesn't have the value 'myFramework', but I can't get the test to work, because if the test goes it only looks in the myFramework.js file and not in the user's JavaScript file like the script.js file or the application.js file.

My code is as followed:

if (using !== "myFramework") {
     alert("The value 'myFramework' is not defined in the 'using' variable.")   
}

P.S : My Framework is not the real name of the framework.

** I do not want to use jQuery **

Your check will only work if your script is included after the other files. It can't check for variables added in the future. — gen_Eric
– gen_Eric, Commented Sep 23, 2013 at 18:56
It's not about which file it looks in but at what else is already loaded when that condition is executed — Stokedout
– Stokedout, Commented Sep 23, 2013 at 18:56
Please have a look at my answer, I believe that you took the wrong approach. — plalx
– plalx, Commented Sep 23, 2013 at 19:23

plalx · Accepted Answer · 2013-09-23 21:01:58Z

For making sure the user is creating the element with my framework, I've created a variable that the user defines at the end of their file.

Have a global using variable is a poor way to monitor if the element was created with your framework or not. It's extremely unreliable and adds complexity to the client code. Even if that using variable was defined, there's nothing telling you they really used the element function to manipulate their elements. Also, it's a very bad practice to pollute the global namespace with additionnal globals.

Anyway, I am not sure why it's of any interest to have that knowledge, but you could simply set an attribute on the element it-self it it's ever passed/created to/by the element function.

To make it simple, let's say that you have an element function that takes a tagName as argument and returns a wrapped version of the element.

E.g.

var element = (function () {
    var elCount = 0;

    function element(tagName) {
        return new ElementWrapper(document.createElement(tagName));
    }

    function ElementWrapper(el) {
        this.el = el;
        this.el.setAttribute('data-my-framework', ++elCount);
    }

    return element;

})();

That means you can use someDOMEl.hasAttribute('data-my-framework') to know if the element was created with the element function or not. Obviously the client code could always remove the attribute, but then there's nothing you can do.

console.log(element('div').el.getAttribute('data-my-framework')); //1

ced-b · Accepted Answer · 2013-09-23 19:07:10Z

0

I recommend doing this check using an onload event. This makes sure all the content is loaded and the variable would be set:

 window.onload = function() {
    if (using !== "myFramework") {
       alert("The value 'myFramework' is not defined in the 'using' variable.");
    }
 }

answered Sep 23, 2013 at 19:07

ced-b

4,0371 gold badge31 silver badges40 bronze badges

1 Comment

123 Over a year ago

This still doesn't help me with the problem.

Collectives™ on Stack Overflow

How to check if an variable in Javascript is defined in another Javascript file and display an alert if it isn't?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related