Using a Global Variable in two scripts on same page - javascript

I want to access a common variable from two differnrt jquery scripts (which will be loaded externally to the same page). so I use
window.commonVar = 0;
My question is what are the options I've got to update it? So that both scripts have the same last updated value?
So basically if script 1 do commonVar++ , script 2 should know the current value. same way around.

You have multiple options:
Declare the variable in which ever script you load first.
Declare the variable in your main html page in a script tag before you load your other scripts
Declare the variable in a third script that you load first before the other two scripts. This script could be composed of all gobal variables that you need access via other scripts.
You could even store it in a hidden input's value.

Related

How to read a variable declared in a html file inline script to another html inline script

I have two html files e.g. abc.html & rst.html.
abc.html has inline script having a variable x declared inside it with some value.
Now I want to access the x value inside rst.html file's inline script.
Could you please let me know if this is possible.
You can't.
JavaScript does not let you access other tabs (to some extend, you may be able to access <iframes>s which could be in a separate window, but that's it and newer browsers generally prevent such accesses).
While in your browser, you have access to one set of global variables that are in that one window. Anything else is not accessible for security reasons.
The only way you would be able to do that is by using AJAX to read the second file and then search for the variable and grab the value. Good luck doing that...
The simplest for you will be to create a file, say x.js, and load that in both HTML pages. Now you will have access to all the data found in x.js.

Retain value of variable between different html files

Fairly new to Javascript.
Imagine I have a Javascript file: Book.js, inside which I just have some global variable: var globalVar = 0;
Imagine I also have two separate html files: A.html and B.html, both of which use above script: e.g. have <script src="src/model/Book.js"></script> inside.
Now, when I opened A.html I could see globalVar was defined. Then I incremented is using console.
Then, when I opened page B.html, I was expecting globalVar to retain its value (since I declared it as global inside Book.js file and B.html also loaded Book.js) but it was undefined.
Is that expected?
Does it mean scope of global variables is inside one html page?
Apparently the second time the Book.js script got loaded, variables declared during previous invocation of Book.js "disappeared".
Is that expected?
Yes
Does it mean scope of global variables is inside one html page?
It is more akin to each page being a new program (and a reload of a page being akin to exiting the program and then running it again).
So it means you must use localStorage or something similar if you want to access variable declared in other page?
Yes. That's why localStorage was created.
Yep, the Javascript is loading in one page and cannot be changed this way, because you are reloading it from your server. Basically, each page is a different process.
However, you can use a lot of workaround like :
LocalStorage : https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Cookie : https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
And if you use a complex application, you can manage your gobal variable in back

Display Variable in HTML

Okay, I've seen a ton of variants of this question posted with no answer that seems to apply to my situation.
In the most direct terms possible, I have a function that calculates a number variable named score. That variable's value is arbitrary.
Is it possible for me to, in a code section, have that single variable be sourced into the html from an externally sourced JS file?
<div>
Thank you for completing my quiz!<br/>
Your score is:<br/>
(The variable would go here)<br/>
Please try again sometime!
</div>
I would want it to just display a number there, that changes based on the value of the score variable. is that possible?
HTML can't pull values from JavaScript. You need to write JavaScript to manipulate the DOM (e.g. with document.getElementById and document.createTextNode and element.replaceChild) whenever the data gets updated.
Frameworks such as React or Angular might help you achieve this.
Is it possible for me to, in a code section, have that single variable be sourced into the html from an externally sourced JS file?
If you want to get a the value of a variable that exists in an external location you can do this:
Let's say you have a file named "file.js" that contains:
var helloworld = "This is a string";
If you want to access that variable that is is global scope from your HTML code, add the script tag:
<script type="text/javascript" src="..url_to_the_file.."></script>
inside the <head> tags.
And then in your javascript that should be below that, you can type:
<script>
document.write(helloworld);
</script>
And it will print the value of the variable helloworld. I guess this is what you wanted to do, because you are printing the value of a javascript variable that exists in an external location

How to create a global variable that can be accessed from external javascript as well as asp.net website

In my website we have one common javascript where we will assign value to a variable i want to call that variable in my aspx page as well as in another javascript file can anyone let me know how to declare that kind of varibale globally .
you can write a common javascript file which will contain all the global variable(assuming they are constant and they wont change).
if you have the variable value as non constant, there is noway that you can put it in a javascript file, instead you can use the local storage, cookies to store the information and use it across your javascript files.
the life time of a javascript variable is limited to the page, you navigate to other page its lost.
If you do not expect any page to assign new values in your common javascript, you can add it to the page as the first header script :
<script type="text/javascript" src="script/common.js"></script>
If you want to assign new values and reuse them, it is possible if you let ASP.Net generate your javascript file by passing a query string to the next page's URL, then in that page's script tag. Let's assume that your common variable is called "myGlobalVar". Supposing that "common_js.aspx" dynamically generates your variable definition, you can have something like this :
(URL : www.mysite.com/products.aspx?myGlobalVar=3)
<script type="text/javascript" src="script/common_js.aspx?myGlobalVar=3"></script>
This will keep track of your new js value whenever an update has to be made.
But if so, you may likely want to use a cleaner way to achieve what you want, for example : using the context manager instead of common js vars.

Importing javascript file multiple times on same page

I have a javascript file called pendingAjaxCallsCounter.js with a variable "var pendingAjaxCalls" which is incremented/decremented when various methods in the js file are called.
Separately, I have created an automated testing app which checks that the pendingAjaxCalls has a value of 0 before interacting with any page. I'm wondering, if a given page, were to import the js file multiple times; multiple
statements, how would that affect the value of my variable "var pendingAjaxCalls"?
The script would be run each time it was included, but make sure that you don't redefine the pendingAjaxCalls variable each time. i.e. Check it's defined before declaring it with something like:
if(!pendingAjaxCalls)
var pendingAjaxCalls=0;
/* code happens here */
pendingAjaxCalls++;
Each time you include a script using a script tag, the browser will download the file and evaluate it. Each time you include a JavaScript file the contents will be evaluated.
If the actual call to the function that increments your variable is being inserted more than once, you could be incrememting it multiple times.
On the other hand, if only the function that increments it is being inserted multiple times (not the function call), then JavaScript will use the most recently defined version of this function. So it shouldn't be incremented extra times in that case.
In other words, if you insert the same function twice but only call it once, you don't have to worry about "both copies" of the function being called, since one copy effectively overwrites the other.

Categories