Question

我正在尝试建立一个传单地图，用户可以在其中选择数据集的两个表达式。第一个是热图，第二个是比例符号，每个符号都在自己的.js中设置。我正在尝试解决以下示例：How to switch between 2 javascript files

我有以下代码，该代码似乎未引发任何错误，但似乎也未实现我想要的功能。我不明白如何将html div链接到javascript函数。有人有见识吗？

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

修改后的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

也许如果将 if 中的var从 expression 更改为 src

您正在使用var'expression'，但我在您的代码中找不到它。

它将是这样的：

<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>

您在 div 中放入的 id 无效。

Answer 2

函数loadScript()似乎未在您的代码中定义。

这应该做：


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

只需确保在调用函数时传递了有效路径（即，适当替换/path/to/main_heat.js）。

Answer 3

您将需要使用正确的变量名称定义以下两个函数。

chnageExpression如下：

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

loadScript如下：

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

希望这会清除不同函数和变量名之间的混淆。

如何在Javascript文件之间切换

3 个答案: