Access a variable defined in a js , from an html page?

Question

I have set a variable in one of my javascript files and i want to access that variable in an html file . How do i do the same?

here us my javascript code(file name is JSUI.js):

      JSUI = function () {
            this.glistName = null;
            this.renderUI = function(list) {
                this.glistName = list.listName;
                window.location="page2.html";   
            };
        };
var gJSUI = new JSUI();

page2.html:

 <body>
    <script src="js/JSUI.js"></script>
    ListName: <input type="text" id="listName"></input> 
    </body>


    <script type="text/javascript">

         if(document.readyState="complete"){
             document.getElementById("listName").value = gJSUI.glistName;
         }

    </script>

Basically page2.html gets loaded when renderUI method of JSUI.js is called and i want to populate a textbox present in page2.html with a variable defined in JSUI.js file .How do I achieve the same?

Where is glistName declared? (E.g., where is var glistName or let glistName, if anywhere?) — T.J. Crowder
– T.J. Crowder, Commented Jun 5, 2016 at 8:45

annemartijn · Accepted Answer · 2016-06-05 09:06:40Z

1

you have actually created a class but there are some mistakes and the most important : you don't initialize the class itself.

Try this:

JSUI = function () {
    this.glistName = null;
    this.renderUI = function(list) {
        this.glistName = list.listName;
        window.location="page2.html";   
    };
};

And in you page:

if(document.readyState="complete") {
    var myobject = new JSUI();
    document.getElementById("listName").value = myobject.glistName;
}

edited Jun 5, 2016 at 9:06

annemartijn

1,6441 gold badge25 silver badges50 bronze badges

answered Jun 5, 2016 at 8:53

Verthosa

1,6881 gold badge16 silver badges39 bronze badges

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

7 Comments

T.J. Crowder Over a year ago

Suggest also having them fix their implicit global (JSUI).

Manas Saxena Over a year ago

Still not working myobject.gListName is null . Is this happening because the renderUI method of JSUI is called from another page (page1.html). So the flow goes like this page1.html ---> JSUI.renderUI()-->page2.html.

T.J. Crowder Over a year ago

@user2713255: glistName will be null until you call renderUI on myobject, passing in an object with a listName value that's not null.

Verthosa Over a year ago

also going to another page will indeed clear your variable. You'll need cookies or sessions to store variables across different pages, or use a querystring!

Manas Saxena Over a year ago

Edited the code as per your suggestion. Oh, if going to another page clears the variable yes then definitely this would not work. Yes will have to come up with another approach.

|

Trace · Accepted Answer · 2016-06-05 09:25:18Z

1

There are different methods to achieve the desired result:

1) Set the variable to the global Window object;
2) Use a modular pattern where you export the variable in one js file, and import it in the other (which I'd use). Use AMD (requirejs), commonjs, ES6 modules, ... ;
3) Use the localstorage to store state;
4) Use the DOM to store state;
5) Keep state at the server and use dehydrate to extract state into JS objects to different components when the js gets loaded;
6) Use ajax to get state from the server when the page is loaded and dispatch the state to different components that need it on app bootstrap;

edited Jun 5, 2016 at 9:25

answered Jun 5, 2016 at 9:14

Trace

18.9k21 gold badges98 silver badges174 bronze badges

1 Comment

Burak Tokak Over a year ago

Nice answer. Global window object seems to be the most efficient.

Collectives™ on Stack Overflow

Access a variable defined in a js , from an html page?

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related