How can i load .js file in html with button

Question

I would like to load a javascript file in an html document. I need to do it with a bbutton. I have two files the "index.html" and "testing.js"
i have to load the whole of the js file. how could this be possible?

would you please elaborate?.. im having trouble understanding the context of your question. why wouldnt you load the js file normally using a script tag? — Moose, Apr 27 '17 at 18:21

Siamand · Accepted Answer · 2020-10-01T20:20:09.297

6

If you have jQuery loaded in your page, just write the following line:

  $.getScript("testing.js");

Otherwise you need to add a script tag as below:

var scriptTag = document.createElement('script');
scriptTag.setAttribute('src','testing.js');
document.head.appendChild(scriptTag)

also you can set async attribute to true as well.

scriptTag.async = true

edited Oct 01 '20 at 20:20

answered Apr 27 '17 at 18:21

Siamand

1,080
10
19

Badacadabra · Answer 2 · 2017-04-27T18:41:27.783

1

I do not know the structure of your HTML, but you could do this:

var button = document.getElementsByTagName('button')[0],
    script = document.getElementsByTagName('script')[0];
    
button.addEventListener('click', handler, false);

function handler() {
  script.src = 'testing.js';
  console.log(script);
}

<button>OK</button>
<script src=""></script>

edited Apr 27 '17 at 18:41

answered Apr 27 '17 at 18:31

Badacadabra

8,043
7
28
49

score 1 · Answer 3 · answered Apr 27 '17 at 18:33

Alternative (non-jQuery):

document.getElementsByTagName('body')[0].innerHTML += "<script src='testing.js'></script>";

document.getElementsByTagName('body') gets an array of elements of body tag. [0] selects the first (and only, usually) element of that array.

Next, .innerHTML accesses the code inside the element (i.e., our only body tag here) and += adds the string ("<script src='testing.js'></script>") after the HTML already in it. And then the script is loaded.

Overall:

<html>
    <head>
        <script>
            function loadScript()  {
                document.getElementsByTagName('body')[0].innerHTML += "<script src='testing.js'></script>";
            }
        </script>
    </head>
    <body>
        <button onclick='loadScript()'></button>
    </body>
</html>

How can i load .js file in html with button

3 Answers3