title: How to Switch Between Javascript Files
body: <p>I'm trying to set up a leaflet map where the user can choose between two expressions of a dataset. The first is a heatmap and the second proportional symbols, with each set up in its own .js. I'm trying to work off of this example: <a href="https://stackoverflow.com/questions/20597066/how-to-switch-between-2-javascript-files">How to switch between 2 javascript files</a></p>
  
  <p>I have the following code, which doesn't seem to be throwing any errors, but also doesn't seem to be accomplishing what I want it to. I'm not understanding how to link the html div to the javascript function. Does anyone have any insights?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id ="expression"&gt;
      &lt;h4&gt;Choose your expression&lt;/h4&gt;
      &lt;a href="#" onclick="changeExpression('heat');"&gt;Heatmap&lt;/a&gt;
      &lt;a href="#" onclick="changeExpression('prop');"&gt;Prop symbols&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>function changeExpression(src){
      var heat = document.createElement("script");
      heat.src = main_heat.js;
      document.body.appendChild(heat);
      var prop = document.createElement("script");
      prop.src = main.js;
      document.body.appendChild(prop);
  
      if (expression === "heat"){
          loadScript("main_heat.js")
      } else if (expression === "prop"){
          loadScript("main.js");
      }
  };
  </code></pre>
  
  <p>revised main.js:</p>
  
  <pre><code>function changeExpression(src){
      var heat = document.createElement("script");
      heat.src = "js/main_heat.js";
      document.body.appendChild(heat);
      var prop = document.createElement("script");
      prop.src = "js/main.js";
      document.body.appendChild(prop);
  
  /*  if (src === "heat"){
          loadScript("main_heat.js")
      } else if (src === "prop"){
          loadScript("main.js");
      } */
  
      if (expression === "heat"){
      loadScript("data/main_heat.js")
      } else if (expression == "prop"){
      loadScript("data/main.js");
      }
      function loadScript(src){
          var el = document.createElement("script");
          el.src = src;
          document.body.appendChild(el);
      }
  };
  </code></pre>