Dynamically change script src client-side

Question

I have an HTML page which contains:

a <select> dropdown with 3 options with an onchange event to a JS function
a DIV holder with a script element inside:

Here's the code:

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

And here's the JS function:

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

When I select option 2 or 3 I get this output in my browser: [object HTMLScriptElement]

What I want to do is switch the src property of the script tag based on the value selected in the dropdown element. I want to do this client-side and preferably without any external libraries...

Joseph · Accepted Answer · 2012-12-06 16:54:07Z

8

The other solution is great :) ...but if you still want to create elements via JavaScript you should use appendChild instead of innerHTML...

Here is what your JavaScript should be :)

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

answered Dec 6, 2012 at 16:54

Joseph

1,08610 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhay Singh Over a year ago

but it increse the no of script files in resources

bluetoft · Accepted Answer · 2012-12-06 16:56:38Z

2

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

answered Dec 6, 2012 at 16:56

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

Comments

Toni Toni Chopper · Accepted Answer · 2012-12-06 16:49:36Z

0

do simply:

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

answered Dec 6, 2012 at 16:49

Toni Toni Chopper

1,8512 gold badges20 silver badges29 bronze badges

Collectives™ on Stack Overflow

Dynamically change script src client-side

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related