如何在Javascript文件之間切換

Question

我正在嘗試設置一個傳單地圖，用戶可以在其中選擇數據集的兩個表達式。 第一個是熱圖和第二個比例符號，每個符號都設置在自己的.js中。 我正試圖解決這個例子： 如何在2個javascript文件之間切換

我有以下代碼，似乎沒有拋出任何錯誤，但似乎也沒有完成我想要它。 我不明白如何將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 from 表達式中的var更改為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);
}

希望這將清除不同函數和變量名之間的混淆。