如何在Javascript文件之间切换

时间:2019-05-08 18:38:03

标签: javascript

我正在尝试建立一个传单地图,用户可以在其中选择数据集的两个表达式。第一个是热图,第二个是比例符号,每个符号都在自己的.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);
    }
};

3 个答案:

答案 0 :(得分:0)

也许如果将 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 无效。

答案 1 :(得分:0)

函数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)。

答案 2 :(得分:0)

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

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

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