Dynamically change script src client-side

dom-events, javascript

Solution

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>

Problem

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

Original source