如何根据输入加载不同的Javascript文件

我正在制作一个地图，允许用户从数据集的两个表达式中选择一个，并在它们之间切换。每个表达式都在自己的.js中设置（main_heat.js表示热图，main.js表示比例符号）

我的问题是在我的index.html文件中设置控件，该控件将在单击的基础上加载选定的表达式。以下代码不会引发错误，但不会产生我期望的结果（重新加载其他表达式）：

index.html：

<div id ="expression">
    <h4>Choose your expression</h4>
    <a href="#" onclick="changeExpression('heat');">Heatmap</a> |
    <a href="#" onclick="changeExpression('prop');">Proportional Symbols</a>
</div>
<!--EXTERNAL SCRIPT LINKS-->
<script type="text/javascript" src="js/main_heat.js"></script>
<script type="text/javascript" src="js/main.js"></script>

changeExpression

和

loadScript

都是在main.js中的初始回调函数中调用的，我很难理解index.html中的“onclick”为什么不会产生更改。有没有人知道我哪里出了问题，或者对可能导致这种情况的原因有什么见解？

• 在loadScript（“main_heat.js”）的行末缺少分号

• 检查脚本的路径，因为它们不同（在一个地方您省略了目录），因此可能找不到
• 检查控制台是否有任何错误，如

  net:：ERR\u ABORTED 404（未找到）

• 考虑添加代码以检查脚本是否已追加，因为每次单击都会再次追加脚本
• 在loadScript（“main_heat.js”）的行末缺少分号

• 检查脚本的路径，因为它们不同（在一个地方您省略了目录），因此可能找不到
• 检查控制台是否有任何错误，如

  net:：ERR\u ABORTED 404（未找到）

• 考虑添加代码以检查脚本是否已追加，因为每次单击都会再次追加脚本

---

如果需要基于“onClick”运行不同的脚本，有几种方法可以实现您想要的
• 如果Js文件的大小无关紧要，最好的方法是在“index.html”文件中添加带有脚本标记的Js文件，如下所示

文件标题
选择你的表达方式
|

如果需要基于“onClick”运行不同的脚本，有两种方法可以实现您想要的
• 如果Js文件的大小无关紧要，最好的方法是在“index.html”文件中添加带有脚本标记的Js文件，如下所示

文件标题
选择你的表达方式
|

控制台中是否有任何错误？为什么

changeExpression（）

同时加载两个文件，然后调用

loadScript（）

只加载其中一个？为什么在一个案例中有

js/

目录？检查控制台。。。当我加载页面时，当我单击这两个选项时，似乎出现了错误，显示“Map container已初始化”。这是

js/

目录的一个好发现，这是一个疏忽。听起来问题在于这两个表达式的代码中。它们都试图创建一个对象，而创建该对象的代码被设计为只运行一次。控制台中是否有任何错误？为什么

changeExpression（）

自己加载两个文件，然后调用

loadScript（）

只加载其中一个？为什么在一个案例中有

js/

目录？检查控制台。。。当我加载页面时，当我单击这两个选项时，似乎出现了错误，显示“Map container已初始化”。这是

js/

目录的一个好发现，这是一个疏忽。听起来问题在于这两个表达式的代码中。他们都试图创建一个对象，而创建该对象的代码设计为只运行一次。第二个解决方案成功了！非常感谢。只需添加

map.off（）

和

map.remove（）

即可显示所有内容。太棒了！欢迎我的答案中是否需要map.off（）或map.remove（）？如果是，请更正。第二个解决方案有效！非常感谢。只需添加

map.off（）

和

map.remove（）

即可显示所有内容。太棒了！欢迎我的答案中是否需要map.off（）或map.remove（）？如果是，请更正。

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

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