Question

我正在制作一张地图，该地图将允许用户选择数据集的两个表达式之一并在它们之间切换。每个表达式都在自己的.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>

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

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

changeExpression和loadScript都在main.js的初始回调函数中被调用，我正在努力查看为什么index.html中的“ onclick”不会产生变化。有人看到我要去哪里哪里了吗，还是对导致问题的原因有见识？

Answer 1

在行loadScript("main_heat.js")的末尾缺少分号
检查脚本的路径，因为它们是不同的（在一处，您省略了目录），因此很可能找不到
检查控制台是否有net::ERR_ABORTED 404 (Not Found)之类的错误
考虑添加代码以检查脚本是否已附加，因为每次单击都会再次添加脚本

Answer 2

如果需要基于“ onClick”运行不同的脚本，可以通过两种方法来实现所需的目标。

如果Js文件的大小无关紧要，最好的方法是在“ index.html”文件中添加带有脚本标签的Js文件，如下所示。

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

如果您需要基于onClick添加这两个脚本，则可以使用以下简单函数来完成它。

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
  <div id ="expression">
      <h4>Choose your expression</h4>
      <a href="#" onclick="changeExpression('heat');">Heatmap</a> |
      <a href="#" onclick="changeExpression('prop');">Proportional Symbols</a>
  </div>
</body>

<script type="text/javascript">
  let changeExpression = function (type) {
    let elem = document.createElement("script");
    
    if (type === 'heat') {
      elem.src = "js/main_heat.js";
    } else {
      elem.src = "js/main.js";
    }
    map.off();
    map.remove();
    document.body.appendChild(elem);
  }
</script>
</html>

希望这会有所帮助！

如何基于输入加载不同的Javascript文件

2 个答案: