Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Define a global variable in a JavaScript function

Is it possible to define a global variable in a JavaScript function?

I want use the trailimage variable (declared in the makeObj function) in other functions.

<html xmlns="http://www.w3.org/1999/xhtml">     <head id="Head1" runat="server">         <title></title>         <script type="text/javascript">             var offsetfrommouse = [10, -20];             var displayduration = 0;             var obj_selected = 0;             function makeObj(address) {                 **var trailimage = [address, 50, 50];**                 document.write('<img id="trailimageid" src="' + trailimage[0] + '" border="0"  style=" position: absolute; visibility:visible; left: 0px; top: 0px; width: ' + trailimage[1] + 'px; height: ' + trailimage[2] + 'px">');                 obj_selected = 1;             }              function truebody() {                 return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;             }             function hidetrail() {                 var x = document.getElementById("trailimageid").style;                 x.visibility = "hidden";                 document.onmousemove = "";             }             function followmouse(e) {                 var xcoord = offsetfrommouse[0];                 var ycoord = offsetfrommouse[1];                 var x = document.getElementById("trailimageid").style;                 if (typeof e != "undefined") {                     xcoord += e.pageX;                     ycoord += e.pageY;                 }                 else if (typeof window.event != "undefined") {                     xcoord += truebody().scrollLeft + event.clientX;                     ycoord += truebody().scrollTop + event.clientY;                 }                 var docwidth = 1395;                 var docheight = 676;                 if (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight) {                     x.display = "none";                     alert("inja");                 }                 else                     x.display = "";                 x.left = xcoord + "px";                 x.top = ycoord + "px";             }              if (obj_selected = 1) {                 alert("obj_selected = true");                 document.onmousemove = followmouse;                 if (displayduration > 0)                     setTimeout("hidetrail()", displayduration * 1000);             }         </script>     </head>     <body>         <form id="form1" runat="server">         <img alt="" id="house" src="Pictures/sides/right.gif" style="z-index: 1; left: 372px;             top: 219px; position: absolute; height: 138px; width: 120px" onclick="javascript:makeObj('Pictures/sides/sides-not-clicked.gif');" />         </form>     </body> </html> 
like image 437
hamze Avatar asked Apr 26 '11 06:04

hamze


People also ask

Can you declare a global variable in a function JavaScript?

You can't define a global variable inside a function. You can implicitly create a global variable, or create a window property inside a function, but you can't define a global variable inside a function. With regards to JavaScript in a browser environment, a global variable and a property of window are synonymous.

How do you define a global variable in a function?

The global Keyword Normally, when you create a variable inside a function, that variable is local, and can only be used inside that function. To create a global variable inside a function, you can use the global keyword.

How do you define a global function in JavaScript?

Everything in JS is bound to containing scope. Therefore, if you define a function directly in file, it will be bound to window object, i.e. it will be global. To make it "private", you have to create an object, which will contain these functions.


1 Answers

As the others have said, you can use var at global scope (outside of all functions and modules) to declare a global variable:

<script> var yourGlobalVariable; function foo() {     // ... } </script> 

(Note that that's only true at global scope. If that code were in a module — <script type="module">...</script> — it wouldn't be at global scope, so that wouldn't create a global.)

Alternatively:

In modern environments, you can assign to a property on the object that globalThis refers to (globalThis was added in ES2020):

<script> function foo() {     globalThis.yourGlobalVariable = ...; } </script> 

On browsers, you can do the same thing with the global called window:

<script> function foo() {     window.yourGlobalVariable = ...; } </script> 

...because in browsers, all global variables global variables declared with var are properties of the window object. (In the latest specification, ECMAScript 2015, the new let, const, and class statements at global scope create globals that aren't properties of the global object; a new concept in ES2015.)

(There's also the horror of implicit globals, but don't do it on purpose and do your best to avoid doing it by accident, perhaps by using ES5's "use strict".)

All that said: I'd avoid global variables if you possibly can (and you almost certainly can). As I mentioned, they end up being properties of window, and window is already plenty crowded enough what with all elements with an id (and many with just a name) being dumped in it (and regardless that upcoming specification, IE dumps just about anything with a name on there).

Instead, in modern environments, use modules:

<script type="module"> let yourVariable = 42; // ... </script> 

The top level code in a module is at module scope, not global scope, so that creates a variable that all of the code in that module can see, but that isn't global.

In obsolete environments without module support, wrap your code in a scoping function and use variables local to that scoping function, and make your other functions closures within it:

<script> (function() { // Begin scoping function     var yourGlobalVariable; // Global to your code, invisible outside the scoping function     function foo() {         // ...     } })();         // End scoping function </script> 
like image 137
T.J. Crowder Avatar answered Sep 30 '22 05:09

T.J. Crowder