When adding a new tag (custom HTML), for example to show a pop-up when a user scrolls, sometimes it is necessary to load external js and css.
How can I do it? I have tried it with and I have not succeeded.
<script type="text/javascript">
function addScript(filename, implementationCode, location){
var scriptTag = document.getElementsByTagName(location)[0];
var script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
script.onload = implementationCode;
script.onreadystatechange = implementationCode;
scriptTag.appendChild(script);
}
function addCSS(filename){
var head = document.getElementsByTagName('head')[0];
var style = document.createElement('link');
style.href = filename;
style.type = 'text/css';
style.rel = 'stylesheet';
head.append(style);
}
var yourCodeToBeCalled = function(){
//The code that goes here does not recognize the library,
//but instead it loads it and if I execute the code
//directly on the console if it works.
};
addCSS('url');
addScript('url', yourCodeToBeCalled, 'head' );
</script>
Any ideas?