Is there any way to export JS variables within a module function to another file using vanilla JS?

Question

My header.js dynamically creates the buttons that show and hide my pages. These pages are each modulated independently in their own JS files. How can I export the elements' variables that I must change the classList on since I cannot change the classList on a function?

header.js

function header() {
  const element = document.createElement('div');

  element.innerHTML = `
    <nav>
       <button type="button" class="btn btn-dark" id="home"><a href="">Home</a></button>
       <button type="button" class="btn btn-dark" id="menu"><a href="">Menu</a></button>
       <button type="button" class="btn btn-dark" id="location"><a href="">Location</a></button>
     </nav>
    `;

  // Add the image to our existing div.
  const myIcon = new Image();
  myIcon.src = Icon;
  element.appendChild(myIcon);
  return element;

}

document.body.appendChild(header());

export default header;

Example of my modules mission.js

const mission = () => {
  const element = document.createElement('div');
  element.classList.add('hide');
  element.innerHTML = `
  <div class='asl'>
      <div class='mission' id='mission'>
          <div class='text-content'>
              <h2>Our Mission</h2>
              <h4>Provide you with Handpicked, Artisanally Curated, Free Range, Sustainable, Organic Tea & Delicious Desserts</h4>
          </div>
      </div>
  </div>
    `;

  return element;
};

document.body.appendChild(mission());

export default mission;

Appreciate your help:)

Answer 1

You can export variables; however, your constant is declared in the function and a constant is block-scoped, so it won't be accessible outside of the function brackets.

However, you could use something like the module pattern to export a variable:

const myModule = (function() {
const myVariable = 1;

function myFunction() {
return myVariable + 1;
}

function getmyVariable() {
return myVariable;
}

return {myFunction, getMyVariable};
}());

export { myModule };

Then you could use it like this:

//import it
const variable = myModule.getMyVariable();

There are also many more ways you could do this, declare the constant outside the function block, create classes with getters and setters or create Factory Functions.

Answer 2

ES Modules (ie. the import / export syntax) are a part of the Javascript specification, which is to say, they are "vanilla".

However, that doesn't mean every browser or other JS runtime supports them, and in fact some still don't, or only do in some provisional way. The MDN's Modules page has a chart that shows a breakdown of support for popular JS runtimes.

If your runtime doesn't support ES Modules, it might support the older CommonJS (ie. require ) syntax instead. If it doesn't support either, you will need to use some sort of bundling program.

PS One other thing to consider is timing. When module code runs it runs at load time... but the DOM might not be ready then, which means document -using code may not work. You have to add the code to some sort of DOMContentReady or similar event handler to ensure that the modules load first, then the DOM loads, then that code runs.