How to Switch Between Javascript Files

Question

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: How to switch between 2 javascript files

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?

html:

<div id ="expression">
    <h4>Choose your expression</h4>
    <a href="#" onclick="changeExpression('heat');">Heatmap</a>
    <a href="#" onclick="changeExpression('prop');">Prop symbols</a>
</div>

js:

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");
    }
};

revised main.js:

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);
    }
};

Answer 1

Maybe if you change the var in your if from expression to src

You're using a var 'expression', but I dont find it in your code.

It will be like this:

 <script> 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 (src === "heat"){ loadScript("main_heat.js") } else if (src === "prop"){ loadScript("main.js"); } }; </script> 

The id you put in your div doesn't work that way.

Answer 2

The function loadScript() doesn't seem to be defined in your code.

This should do:

if (expression === "heat"){
    loadScript("/path/to/main_heat.js")
} else if (expression === "prop"){
    loadScript("/path/to/main.js");
}


function loadScript(src){
    var el = document.createElement("script");
    el.src = src;
    document.body.appendChild(el);
}

Just make sure you're passing a valid path when your calling your function (ie. replace /path/to/main_heat.js as appropriate).

Answer 3

You will need two functions defined as below with correct variable names.

chnageExpression as below:

function changeExpression(src){
    if(src === "heat"){
      loadScript("main_heat.js")
    } else if(src === "prop"){
      loadScript("main.js")
    }
 }

loadScript as below:

function loadScript(src){
    var el = document.createElement("script");
    el.src = src;
    document.body.appendChild(el);
}

Hope this will clear confusion between different functions and variable names.