Creation of script inside a javascript

Question

hi experts im a new guy and i have a program that builds a dynamic script inside a existing script

<html>
<head>
    <title>Depot</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    function hideURLbar(){ window.scrollTo(0,1); } </script>
    <link href="localfiles/css/pignose.layerslider.css" rel="stylesheet" type="text/css" media="all" />
    <link href="localfiles/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="localfiles/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="localfiles/js/pagebuilder.js"></script>
</head>
<body onload="BuildHome()">
    <div id="header_content"></div>
</body>

 function BuildHome(){
var bannergrid = document.createElement("div");
    bannergrid.className = "banner-grid";
var visual = document.createElement("div");
   visual.id = "visual";
ba nnergrid.appendChild(visual);
var slide_visual = document.createElement("div");
    slide_visual.className = "slide-visual";
visual.appendChild(slide_visual);
var banner_ul = document.createElement("ul");
    banner_ul.className = "slide-group";
slide_visual.appendChild(banner_ul);    
var slide_script_pignose = document.createElement("script");
    slide_script_pignose.src="localfiles/js/pignose.layerslider.js";
    slide_script_pignose.type="text/javascript";
var slide_script = document.createElement("script");
    slide_script.type="text/javascript"; 
var slide_script_text = document.createTextNode("$(window).load(function() { $('#visual').pignoseLayerSlider({ play    : '.btn-play', pause   : '.btn-pause', next    : '.btn-next', prev    : '.btn-prev' }); });");
    slide_script.appendChild(slide_script_text);
bannergrid.appendChild(slide_script_pignose);
bannergrid.appendChild(slide_script); 
banner_ul.appendChild(slide_li);
document.getElementById("header_content").appendChild(bannergrid);}

when it runs it doesn't show error but the script that has been added dynamically is not working for example: FIY: this is a slider image

<div id="visual">

was created dynamically and it must have a class that has been also dynamically added from

pignose.layerslider.js

and it must be like this:

<div id="visual" class="pignose-layer">

but it's not displaying the class. i need to dynamically add the class inside the pignose.layerslider.js bacause of its funtionality. My analysis is that the script that has been added dynamically is not working/executing please help if thier is a way to run/execute script that has been added inside a script or something that can help!

thank you in advance! sorry for my language not good in english :)

I cannot see this "pignose.layerslider.js" anywhere in your code? May I know when are you loading this? — sudharsan tk, Feb 19 '18 at 03:00
here is the link kindly check http://jsbin.com/gobogac/edit?js — Les ter Bon, Feb 19 '18 at 03:05

coder34 · Answer 1 · 2018-02-19T02:48:03.630

1

Are you sure that you loaded jQuery?

Try adding this line after your <meta> tags:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

Also, see https://stackoverflow.com/a/13122011/5298002

Maybe it's because you didn't add the script to the head of the file.

edited Feb 19 '18 at 02:48

answered Feb 19 '18 at 02:42

coder34

403
5
16

yes i have already added jquery script sorry did not add it to my question – Les ter Bon Feb 19 '18 at 02:50

score 1 · Answer 2 · answered Feb 19 '18 at 04:06

Following is the working code. Try running it. You could update your code to follow the same pattern.

You will need to create a script element. Trigger your method from external script inside onload method of this dynamically loaded script.

var headEL = document.getElementsByTagName('head')[0];
var scriptEL = document.createElement('script');
scriptEL.type = 'text/javascript';

scriptEL.src = 'https://rawgit.com/adikari/07690f28bcbe751d0694215d83cff30f/raw/4f045b95c7b3971ef0c7bf917ef9362635cea200/hello.js';

scriptEL.onload = function() {
    sayHelloFromExternalScript();
};

headEL.appendChild(scriptEL);

i found the error!!!!! var slide_script_text = document.createTextNode("$(window).load(function() { $('#visual').pignoseLayerSlider({ play : '.btn-play', pause : '.btn-pause', next : '.btn-next', prev : '.btn-prev' }); });"); slide_script.appendChild(slide_script_text); it doesnt execute — Les ter Bon, Feb 20 '18 at 00:47

Creation of script inside a javascript

2 Answers2