How to include a .js file in onclick button?

Question

I was trying to make a button that will run a JavaScript when it was clicked.First, my script was like this

<script>
    function myFunction()
    {
        alert('Invalid username or password. Please try again.')
    }
</script>

<input onclick="myFunction()" type="submit" value="Generate" href="submit.php" >

It works, and a popup appear.But when I try to call JavaScript from another site, nothing happens.

<script>
    function myFunction()
    {            
        document.body.appendChild(document.createElement('script')).src='https://raw2.github.com/BlackEagleBCC/Script/master/myscript.js';
    }
</script>

<input onclick="myFunction()" type="submit" value="Generate" href="submit.php" >

Did you run the code on web server

Shaik Mahaboob Basha
– Shaik Mahaboob Basha

2014-02-12 07:01:40 +00:00
Commented Feb 12, 2014 at 7:01 — Shaik Mahaboob Basha
– Shaik Mahaboob Basha, Commented Feb 12, 2014 at 7:01

Mazzu · Accepted Answer · 2014-02-12 07:15:13Z

0

You need to include the js file once event occurs.

Please refer to this link, it demonstrates dynamic including js and css.

Add html code

<ul>
 <li><a href="javascript:loadjscssfile('myscript.js','js')">Load "myscript.js"</a></li>
 <li><a href="javascript:loadjscssfile('mystyle.css','css')">Load "mystyle.css"</a></li>
</ul>

Then js code

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

Code for myscript.js

var petname="Spotty"
alert("Pet Name: " + petname)

Code for mystyle.css

#ul li{
background-color: lightyellow;
}

Similar to this :

You can call loadjscssfile('myscript.js','js') inside your button onclick() event handler.

edited Feb 12, 2014 at 7:15

answered Feb 12, 2014 at 7:06

Mazzu

2,84922 silver badges30 bronze badges

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

10 Comments

Krease Over a year ago

Your answer would be better if you copied over the part of the demo that directly addresses the question, rather than just a link...

Mazzu Over a year ago

Script Kiddies, you may also go through the provided link for live demo, also let me know if you are comfortable to implement your scenario :)

Mazzu Over a year ago

@ScriptKiddies, have you implemented it?

Code Newbie Over a year ago

@Mazzu , nope. I don't know how to do it. :(

Mazzu Over a year ago

@ScriptKiddies, follow the steps as 1. Create your script file say for eg. myscript.js (as shown above). 2. Write loadjscssfile function code (as shown above). 3. Then in your button's function click that is myFunction() (as specified in your question), make function call as loadjscssfile('myscript.js','js'); 4. The output will be alert, as given in myscript.js file.

|

Community · Accepted Answer · 2017-05-23 12:05:31Z

0

Update: Try this out:

<a id='myScript'  type="submit"  href="submit.php" > Generate </a>

Script:

<script type="text/javascript">
    var myScript = document.getElementById('myScript');

    myScript.onclick = function(){

        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://raw2.github.com/BlackEagleBCC/Script/master/myscript.js"; 
        document.getElementsByTagName("head")[0].appendChild(script);
        return false;
    }
</script>

EDITED: The below solution might not be what you are looking for now.

I have been using this,a solution which I found from stackoverflow itself.

function loadScripts(array,callback){
    var loader = function(src,handler){
        var script = document.createElement("script");
        script.src = src;
        script.onload = script.onreadystatechange = function(){
        script.onreadystatechange = script.onload = null;
            handler();
        }
        var head = document.getElementsByTagName("head")[0];
        (head || document.body).appendChild( script );
    };
    (function(){
        if(array.length!=0){
            loader(array.shift(),arguments.callee);
        }else{
            callback && callback();
        }
    })();
}

This will help you create script tags.

loadScripts([
   "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js",
   "https://raw2.github.com/BlackEagleBCC/Script/master/myscript.js"
],function(){
    alert('Scripts have been loaded successfully');
});

Edited: I have used this method when I needed to build script tags and get a callback after everything loads fine. (These things come handy :) ) https://stackoverflow.com/a/1867135/3222041

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Feb 12, 2014 at 7:10

newTag

2,1691 gold badge23 silver badges32 bronze badges

5 Comments

franchez Over a year ago

If you copy paste a code block from an other thread, even a long time ago, can you edit your post and indicating thread where you found it please ?

newTag Over a year ago

@franchez Sorry.. a little late.. Yes of course..I have added it along with the answer. Thanks :)

newTag Over a year ago

@ScriptKiddies I have added the link I referred..Hope it helps you.

Code Newbie Over a year ago

@newTag thanks a lot. but i still can't figure out how to use it.

newTag Over a year ago

@ScriptKiddies I have provided a simple solution than the previous one.(previous solution which I think will not be needing for you now unless you have multiple scripts to load).

Collectives™ on Stack Overflow

How to include a .js file in onclick button?

2 Answers 2

10 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related