CODEWITHSUNDEEP
javascripthtmljqueryajax
Nicolas
Nicolas

Reputation: 183

How can I use a variable from another JavaScript file?

I have two html pages, each with a js file.

When I click on a button on page 1, it should change a variable param to true and redirect the user to page 2.

In page 2 I have to check if param = true and then continue my script.

<div class="container-fluid" id="about">
  <div class="row">
    <div id="mainsubtitle">Page 1</div>
    <button id="edit" type="button">Go to page 2</button>
  </div>
</div>

var param = false;

edit.addEventListener("click", switchToOpenSession);
...
function switchToOpenSession() {
    param = true;
    ...
}

<div class="container-fluid">
  <div class="row">
    <div>Page 2</div>
    <button id="create" type="button">Create account</button>
  </div>
</div>

if (param)
   /* do this */

I tried export/import param but I got Unexpected token 'export' error. I tried type="module" but it doesn't work. The samples that I found was two js files in the same html page!

Can someone help please?

Upvotes: 1

Views: 1969

Answers (3)

uingtea
uingtea

Reputation: 6524

you cannot access variable from different page, except you load page2.html using ajax. Alternative way using cookie or localStorage

script1.js

var param = false;

edit.addEventListener("click", switchToOpenSession);
...
function switchToOpenSession() {
    param = true;
    localStorage.setItem('param', true)
    ...
}

then in script2.js

if (localStorage.getItem('param') == 'true') // note the quotes

Upvotes: 1

n1md7
n1md7

Reputation: 3461

You can't share variable states like that. These two pages are totally different instances, so the context is not the same.

Option 1. When you redirect from one page to another you can add URL param and parse it on page 2.

Option 2. Use localStorage. I assume you have the same origin while talking on page 1 and page 2 so the stored data will be visible.

Upvotes: 0

Sana
Sana

Reputation: 151

you can export the variable from first file

var first;

export { first }

and in your second file you can import that variable

import { first} from './first.js'

OR

<script type="module" src='first.js'></script>

Upvotes: 0

Related Questions