title: Basic ES6 Javascript Plugin - reuse variable between functions
body: <p>I'm attempting to build a basic JS plugin that can be called after a click event to disable a button (to prevent users firing multiple API calls) and to give feedback that something is loading/happening. Here is how it looks:</p>
  
  <p><a href="https://i.stack.imgur.com/z8Cng.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z8Cng.gif" alt="enter image description here"></a></p>
  
  <p>This works great on an individual basis, but I want to re-write it as a plugin so I can reuse it across the site.</p>
  
  <p>Here is a cut down version of the JS from file loader.plugin.js.</p>
  
  <pre><code>let originalBtnText;
  
  
  export function showBtnLoader(btn, loadingText) {
    const clickedBtn = btn;
    const spinner = document.createElement('div');
  
    spinner.classList.add('spin-loader');
  
    originalBtnText = clickedBtn.textContent;
    clickedBtn.textContent = loadingText;
    clickedBtn.appendChild(spinner);
    clickedBtn.setAttribute('disabled', true);
    clickedBtn.classList.add('loading');
  
    return this;
  }
  
  
  export function hideBtnLoader(btn) {
    const clickedBtn = btn.target;
    clickedBtn.textContent = originalBtnText;
    clickedBtn.removeAttribute('disabled');
    clickedBtn.classList.remove('loading');
  
    return this;
  }
  
  
  export function btnLoader() {
    showBtnLoader();
    hideBtnLoader();
  }
  </code></pre>
  
  <p>And here is an example of how I would like to use it.</p>
  
  <pre><code>import btnLoader from 'loaderPlugin';
  
  const signupBtn = document.getElementById('signup-btn');
  
  signupBtn.addEventListener('click', function(e) {
    e.preventDefault();
    btnLoader.showBtnLoader(signupBtn, 'Validating');
    // Call API here
  });
  
  // Following API response
  hideBtnLoader(signupBtn);
  </code></pre>
  
  <p>The issue I have is that I want to store the <code>originalBtnText</code> from the <code>showBtnLoader</code> function and then use that variable in the <code>hideBtnLoader</code> function. I could of course achieve this in a different way (such as adding the value as a data attribute and grabbing it later) but I wondered if there is a simple way.</p>
  
  <p>Another issue I have is that I don't know the correct way of calling each individual function and whether I am importing it correctly. I have tried the following.</p>
  
  <pre><code>btnLoader.showBtnLoader(signupBtn, 'Validating');
  btnLoader(showBtnLoader(signupBtn, 'Validating'));
  showBtnLoader(signupBtn, 'Validating');
  </code></pre>
  
  <p>But I get the following error:</p>
  
  <pre><code>Uncaught ReferenceError: showBtnLoader is not defined
      at HTMLButtonElement.&lt;anonymous&gt;
  </code></pre>
  
  <p>I have read some good articles and SO answers such as <a href="http://2ality.com/2014/09/es6-modules-final.html" rel="nofollow noreferrer">http://2ality.com/2014/09/es6-modules-final.html</a> and <a href="https://stackoverflow.com/questions/33178843/es6-export-default-with-multiple-functions-referring-to-each-other">ES6 export default with multiple functions referring to each other</a> but I'm slightly confused as to the 'correct' way of doing this to make it reusable.</p>
  
  <p>Any pointers would be much appreciated.</p>