can't open a script on button click

Question

I have a long script webpack output, lets call it bla.js
In my main html file I'm trying to open bla.js on button click. this is how I tried to do it:

<body>                    
    <button class="btn-start" type="button" onclick="clickHandler()"></button>            
    <script>
        function clickHandler(){
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "scrs/bla.js";
            document.head.appendChild(script);
        }
    </script>
</body>

but on button click nothing happens although In application tab of google chrome developer tools I can see that the bla.js script gets added!

And when I do it like this:

<body>                    
    <button class="btn-start" type="button" onclick="window.location.href='run_bla.html';">
    </button>            
</body>

and in the run_bla.html:

<body>                    
    <script src='scrs/bla.js'></script>     
</body>

it works perfectly fine! the only problem is in the second way there will be a /run_bla.html at the end of the url and I don't want that.

So what is wrong with the first way? How can I open the script without website url changes? any idea what is the problem? I'm stuck with this for a while...

Did my answer help you with the issue? If so, please mark it as accepted. If not, let me know and I'll try to help. — OfirD
– OfirD, Commented Oct 16, 2018 at 19:18
@HeyJude didn't exactly solved it but helped me to solve it so thanks. — Adrin
– Adrin, Commented Oct 17, 2018 at 10:17

E. Zacarias · Accepted Answer · 2018-10-04 22:21:50Z

2

You have created your script object (stored in the script variable), but you haven't added it to the document.

You may add it to an HTML element using the appendChild function in the element, for example:

function clickHandler(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "scrs/bla.js";
    document.head.appendChild(script);
}

This will append your script to the <head> tag in the document.

answered Oct 4, 2018 at 22:21

E. Zacarias

6477 silver badges19 bronze badges

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

2 Comments

Adrin Over a year ago

oh sorry I already have the appendChild() in my code I just forgot to put it here in my question. I'm sorry. eddited

E. Zacarias Over a year ago

No problem. I am sorry, I have tested the script with appendChild and it worked fine, so I have no more clues. I dunno it is different with Webpack after compile, because it is still just Javascript and Webpack does not rely on "onload", for example (unless you have something that use "onload"). I've tested with an Webpack generated code too, and it worked.

OfirD · Accepted Answer · 2018-10-05 00:54:32Z

Your code is fine, so you probably have an error on your bla.js script, which prevents you from seeing the expected behavior.

You can see that in the following code: jQuery library is loaded dynamically, and is also executed (i.e., it's defined).

function loadJQuery(){
  console.log("clickHandler called");
  console.log(typeof $ !== 'undefined'); // false
  
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://code.jquery.com/jquery-3.3.1.min.js";
  script.onload = function() {
    script.onload = null;
    onJQueryLoad();
  }
  document.head.appendChild(script);
}

function onJQueryLoad() {
	console.log("onScriptLoad called");
  console.log(typeof $ !== 'undefined'); // true
}

<button id="btn" class="btn-start" type="button" onclick="loadJQuery()">click me</button>

Collectives™ on Stack Overflow

can't open a script on button click

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related