動態更改腳本src客戶端

Question

我有一個HTML頁面，其中包含：

• 帶有3個選項的<select>下拉列表以及一個帶有onchange事件的JS函數
• 一個內部有腳本元素的DIV持有者：

這是代碼：

<select onChange="getData(this.value);">
    <option value="-">Limba/Language</option>
    <option value="ro">Romana</option>
    <option value="en">Engleza</option>
</select>
<div id="output">
    <script id="widget" type="text/javascript" src="js1.js"></script>
</div>

這是JS函數：

<script type="text/javascript">
function getData(title)
{
    switch(title)
    {
        case "ro":
            var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "js1.js";
                s.innerHTML = null;
                s.id = "widget";
                document.getElementById("output").innerHTML = s;
        break;
        case "en":
            var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "js2.js";
                s.innerHTML = null;
                s.id = "widget";
                document.getElementById("output").innerHTML = s;
        break;
        default:
        void(0);
    }
}
</script>

當我選擇選項2或3時，我在瀏覽器中獲得此輸出： [object HTMLScriptElement]

我想要做的是根據下拉元素中選擇的值切換腳本標記的src屬性。 我想做這個客戶端，最好沒有任何外部庫...

Answer 1

另一個解決方案很棒:)但是如果你仍然想通過JavaScript創建元素，你應該使用appendChild而不是innerHTML ...

這是你的JavaScript應該是:)

<script type="text/javascript">
function getData(title)
{
    switch(title)
    {
        case "ro":
            var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "js1.js";
                s.innerHTML = null;
                s.id = "widget";
                document.getElementById("output").innerHTML = "";
                document.getElementById("output").appendChild(s);
        break;
        case "en":
            var s = document.createElement("script");
                s.type = "text/javascript";
                s.src = "js2.js";
                s.innerHTML = null;
                s.id = "widget";
                document.getElementById("output").innerHTML = "";
                document.getElementById("output").appendChild(s);
        break;
        default:
        void(0);
    }
}
</script>

Answer 2

function getData(title){
    document.getElementById("widget").src= (title == "ro" || title == "-") ? "js1.js" : "js2.js";
}

Answer 3

簡單地說：

function getData(title) {
    switch(title) {
        case "ro":
            document.getElementById("output").innerHTML = '<script id="widget" type="text/javascript" src="js1.js" />';
            break;
        case "en":
            document.getElementById("output").innerHTML = '<script id="widget" type="text/javascript" src="js2.js" />';
            break;
        default:
            void(0);
    }
}