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 Feb 12 '14 at 07:01 — Shaik Mahaboob Basha, Feb 12 '14 at 07:01

Mazzu · Answer 1 · 2014-02-12T07:15:13.787

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 '14 at 07:15

answered Feb 12 '14 at 07:06

Mazzu

2,799
20
30

Your answer would be better if you copied over the part of the demo that directly addresses the question, rather than just a link... – Krease Feb 12 '14 at 07:07
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 Feb 12 '14 at 07:28
@ScriptKiddies, have you implemented it? – Mazzu Feb 19 '14 at 07:13
@Mazzu , nope. I don't know how to do it. :( – Code Newbie Feb 19 '14 at 16:13
@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. – Mazzu Feb 20 '14 at 10:43
@Mazzu , sure, but how can i contact you personally? :) – Code Newbie Feb 27 '14 at 12:10
@ScriptKiddies, mail me at [email protected] – Mazzu Feb 27 '14 at 14:00
@ScriptKiddies, you can share me code at above mail id :) – Mazzu Mar 13 '14 at 08:50
@Mazzu , sure :) soon. sorry i'm a little bit busy – Code Newbie Mar 14 '14 at 02:51
@ScriptKiddies, No probs, take your time :) – Mazzu Mar 14 '14 at 06:44

score 0 · Answer 2 · edited May 23 '17 at 12:05

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

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 ? — franchez, Feb 12 '14 at 07:19
@franchez Sorry.. a little late.. Yes of course..I have added it along with the answer. Thanks :) — newTag, Feb 12 '14 at 07:35
@ScriptKiddies I have added the link I referred..Hope it helps you. — newTag, Feb 12 '14 at 07:38
@newTag thanks a lot. but i still can't figure out how to use it. — Code Newbie, Feb 12 '14 at 07:45
@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). — newTag, Feb 12 '14 at 08:34

How to include a .js file in onclick button?

2 Answers2