Ładowanie kodu JS na podstawie zdarzenia "resize"

Witam,
Napotkałem mały problem z ładowaniem skryptów dla odpowiednich szerokości ekranów.
 

function addScriptToPage (uri) {
            var script = document.createElement("SCRIPT");
            script.type = "text/javascript";
            script.async = true;
            script.src = uri;

            document.getElementsByTagName("head")[0].appendChild(script);
        }


        function checkWidthScreen () {
            var widthScreen = document.documentElement.offsetWidth,
                elementsArr = document.querySelectorAll("head script");

            if (widthScreen >= 650) {
                 elementsArr[1].setAttribute("src", "script_for_computer.js");
                 elementsArr[2].setAttribute("src", "")
            }
            else {
                 elementsArr[1].setAttribute("src", "script_for_screen.js");
                 elementsArr[2].setAttribute("src", "");

                 if(widthScreen < 479){
                     elementsArr[2].setAttribute("src", "script_for_min_screen.js");
                }
            }
        }



        document.addEventListener("DOMContentLoaded", function() {

            addScriptToPage("all_script.js");
            addScriptToPage("");
            addScriptToPage("");

            window.addEventListener("resize", checkWidthScreen, false);


        })

Kod w sumie działa, bo podczas zmiany szerokości funkcja setAttribute działa jak powinna, ale mimo to przeglądarka nie wczytuje tych skryptów i nie działają z nich odpowiednie funkcje. Popełniłem gdzieś mały błąd, czy raczej cały kod jest w tym przypadku błędny, a takie dodawanie skryptów robi się inaczej?