Retrieving Variable From A Javascript File

Question

My question is how to share a variable between two different javascript files. I am creating a form that transfers the value to a different page, which alerts that variable. I have 2 html files (index.html and form.html) as well as 2 javascript files (form.js and index.js). So basicly I want to share the variable theNick from form.js to index.js to display it using alert(). If this is not possible, is there another way to do this?

form.html:

<input type="text" id="Nick" placeholder="Nickname">
<a id="btn" onclick="submit()" href="index.html.">Submit</a>

form.js:

function submit(){
     var theNick = document.getElementById("Nick").value; //retrieves theNick from your input
     ???

}

index.html:

<button onclick="callNick()">Click Me to view your Nickname.</button>

index.js:

function callNick(){
    ???????
    alert(theNick); //I want to get access to this variable from form.js
}

Daniel Schmidt · Accepted Answer · 2015-09-27 12:28:00Z

1

By using the var keyword you are doing exactly the opposite. If you want to share something the easiest thing would be to bind the variable to the window object like this: window.theNick = ... and use it like alert(window.theNick).

answered Sep 27, 2015 at 12:28

Daniel Schmidt

12k5 gold badges43 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

B. Camp Over a year ago

I tried that just now but instead of saying 'Bob' as theNick it said 'undefined'. Any reason as to why this is happening?

Daniel Schmidt Over a year ago

It depends on the time each function gets called

Nostalg.io · Accepted Answer · 2015-09-27 12:31:30Z

0

It is sort of possible.

First of all you need to make certain that your HTML loads both JavaScript files. There isn't really a way for them to import each other, so the HTML must load both scripts.

Secondly, you need to modify your function submit to use a global variable. Global variables are initially defined outside the scope of a function. The function callNick is already looking for a global variable.

However, the submit function is defining its own, local variable because of the keyword var being used inside the function scope. Change it like so:

// Set global variable 
var theNick;

function submit(){
      // Use global variable 
      theNick = document.getElementById("Nick").value; //retrieves theNick from your input
      ???

}

See this article for further information. http://www.w3schools.com/js/js_scope.asp

answered Sep 27, 2015 at 12:31

Nostalg.io

3,7921 gold badge31 silver badges31 bronze badges

2 Comments

B. Camp Over a year ago

I have tried all of your steps. It seems like callNick is recognizing theNick, but it alerts 'undefined' instead of 'Bob'. It knows that it exists, but doesn't know the value of theNick. If I set theNick in the global scope to 'Bob', it will work, but it is't regognizing when it changes in submit. ideas?

Nostalg.io Over a year ago

You have to run your submit() function. And it must be run after your HTML containing the "Nick" element is loaded. It is common to place all JavaScript files as the last part in the html <body> tag.

andrew · Accepted Answer · 2015-09-27 12:29:42Z

0

You could just declare the variable outside of the function

var theNick; // you could omit this entirely since it will be declared in 
             // global scope implicitly when you try to assign it in the function
function submit(){
    theNick = document.getElementById("Nick").value; //retrieves theNick from your input
}

javascript does not care about which files declarations are made but in which scope.

By placing the variable in global scope you'll be able to access it everywhere.

Global variables are not the best coding strategy but this should help you with the concept

answered Sep 27, 2015 at 12:29

andrew

9,6039 gold badges36 silver badges62 bronze badges

Comments

Dave · Accepted Answer · 2015-09-27 13:32:06Z

0

It seems like you need to store the variable in the local storage object of the window object, this way you can set its value on the first page and retrieve it on the second.

page 1

window.localStorage.setItem("yourVariable", "yourValue");

page 2

var myVar = localStorage.getItem("yourVariable");

Only one 'caveat': this is a html5 feature, so it comes with limitations, check this link for more info.

answered Sep 27, 2015 at 13:32

Dave

164 bronze badges

Comments

Kaiido · Accepted Answer · 2015-09-27 13:34:51Z

You can pass your variable into the url, using the ?yourVar= GET mark :

form.js

function submit(e){
     var theNick = document.getElementById("Nick").value; //retrieves theNick
     e.target.href+='?n='+theNick; // set the href of your anchor with your variable
}

form.html

<input type="text" id="Nick" placeholder="Nickname">
<!-- We pass the event object into our function as a parameter -->
<a id="btn" onclick="submit(event)" href="index.html">Submit</a>

index.js

function callNick(){
    // get the variable from the current location
    var theNick = window.location.href.split('?n=')[1];
    alert(theNick);
}

index.html

<button onclick="callNick()">Click Me to view your Nickname.</button>

▶︎ Plunker_{where "form" has been changed to "index" and "index" to "result".}

Note :
To pass multiple variables, you can use the & delimiter, and then use the window.location.search property as done in this CSS-tricks article.
▶︎ Multiple vars plunker

Collectives™ on Stack Overflow

Retrieving Variable From A Javascript File

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related