How to link external javascript file onclick of button

Question

I would like to call a javascript function in an external JS file  using the onClick function on a button in this file  form tmpl htm     lt button type  quot button quot  value  quot Submit quot  onClick  quot Call the external js file quot   gt   The javascript file is in Public Scripts filename js  I have a template file in template form tmpl html  The root folder contains the Public and template folders

User · Answer

It is totally possible  i did something similar based on the example of Mike Sav  That s the html page and ther shoul be an external test js file in the same folder  example html    lt html gt   lt button type  button  value  Submit  onclick  myclick     gt  Click here    lt div id  mylink  gt  lt  div gt   lt  button gt   lt script type  text javascript  gt  function myclick        var myLink   document getElementById  mylink        myLink onclick   function                var script   document createElement  script                script type    text javascript               script src      test js                document getElementsByTagName  head   0  appendChild script               return false            document getElementById  mylink   click       lt  script gt   lt  html gt    test js   alert  hello world

User · Answer

If you want your button to call the routine you have written in filename js you have to edit filename js so that the code you want to run is the body of a function  For you can call a function  not a source file   A source file has no entry point   If the current content of your filename js is    x000D   x000D  alert  Hello world    x000D   x000D   x000D    you have to change it to    x000D   x000D  function functionName    x000D   alert  Hello world    x000D    x000D   x000D   x000D    Then you have to load filename js in the header of your html page by the line    x000D   x000D   lt head gt  x000D    lt script type  text javascript  src  Public Scripts filename js  gt  lt  script gt  x000D   lt  head gt  x000D   x000D   x000D    so that you can call the function contained in filename js by your button    x000D   x000D   lt button onclick  functionName    gt Call the function lt  button gt  x000D   x000D   x000D    I have made a little working example  A simple HTML page asks the user to input her name  and when she clicks the button  the function inside Public Scripts filename js is called passing the inserted string as a parameter so that a popup says  Hello   lt insertedName gt      Here is the calling HTML page    x000D   x000D   lt html gt  x000D   x000D    lt head gt  x000D     lt script type  text javascript  src  Public Scripts filename js  gt  lt  script gt  x000D    lt  head gt  x000D   x000D    lt body gt  x000D    What s your name   lt input  id  insertedName    gt  x000D     lt button onclick  functionName insertedName value   gt Say hello lt  button gt  x000D    lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    And here is Public Scripts filename js   x000D   x000D  function functionName  s    x000D   alert  Hello      s         x000D    x000D   x000D   x000D

User · Answer

By loading the  js file first and then calling the function via onclick  there s less coding and it s fairly obvious what s going on  We ll call the JS file zipcodehelp js   HTML    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Button to call JS function  lt  title gt   lt  head gt   lt body gt       lt h1 gt Use Button to execute function in   js  file  lt  h1 gt       lt script type  text javascript  src  zipcodehelp js  gt  lt  script gt       lt button onclick  ZipcodeHelp     gt Get Zip Help  lt  button gt   lt  body gt   lt  html gt    And the contents of zipcodehelp js is    function ZipcodeHelp       alert  If Zipcode is missing in list at left  do   n n      1  Enter any zipcode and click Create Client   n      2  Goto Zipcodes and create new zip code   n      3  Edit this new client from the client list  n      4  Select the new zipcode          Hope that helps  Cheers      Ken

User · Answer

You can load all your scripts in the head tag  and whatever your script is doing in function braces  But make sure you change the scope of the variables if you are using those variables outside the script

User · Answer

I have to agree with the comments above  that you can t call a file  but you could load a JS file like this  I m unsure if it answers your question but it may help    oh and I ve used a link instead of a button in my example      lt a href  linkhref html  id  mylink  gt click me lt  a gt    lt script type  text javascript  gt   var myLink   document getElementById  mylink     myLink onclick   function         var script   document createElement  script        script type    text javascript       script src    Public Scripts filename js         document getElementsByTagName  head   0  appendChild script       return false        lt  script gt

User · Answer

You could simply do the following   Let s say you have the JavaScript file named myscript js in your root folder  Add the reference to your javascript source file in your head tag of your html file    lt script src    myscript js  gt  lt  script gt    JS file   myscript js   function awesomeClick      alert  awesome click triggered        HTML   lt button type  button  id  jstrigger  onclick  javascript awesomeClick     gt Submit lt  button gt

[javascript] How to link external javascript file onclick of button

Examples related to javascript