Use a button to call a javascript file in HTML

Question

I am trying to create a button that if I press on it my javascript file gets called. The java script file has many functions so I wasn't sure how to call the functions.

This is how I call the javascript file in my html document.

    <script src="sketch2.js">
</script>

Thank you

May be you need to know how javascript events are used. Gve a visit here - http://www.w3schools.com/js/js_events.asp. There are lot of libraries out there to do it efficiently, but unless you know what you are doing, they are of no use. — brainless coder, Jun 04 '14 at 08:08
Although a Javascript file might contain many functions, it often also has (or should have) documentation that explains which function or functions to call for particular uses. We don't know about your file because we can't see it, you haven't told us about it, and we can't read minds. If you are using a script file you got from another human, ask them. If you are using a library, check the docs. You can try asking again if you can better describe what you are trying to do. — Paul, Jun 04 '14 at 08:21

score 2 · Answer 1 · edited Jun 04 '14 at 08:29

<script src="sketch2.js">
</script>

this is how you include a javascript file in html. to call all the functions in it, make a function which would call all those functions and call this function on button click.

Then add an inline script containing a Javascript function to call the functions

<script>
function newfunction(){
    fun1();
    fun2();
    ...
}
</script>

Then in the HTML you need

   <button onclick="newfunction()">click here</button>

Chrisi · Answer 2 · 2014-06-04T08:23:10.617

1

Create a Button and bind your javascript function to the onclick event. Like this:

<button onclick="functionCall()">
  Do Something
</button>

But you cant just call the whole script file. Ask yourself this question: how should the browser know, which method to call.

In my litte example, it worked:

<html>
<head>
<script>
    function functionCall(){
        alert('hi');
    }
</script>
</head>
<body>
    <button onclick="functionCall()">Do Something</button>
</body>
</html>

edited Jun 04 '14 at 08:23

answered Jun 04 '14 at 08:08

Chrisi

371
3
15

Updated my answer and added my test code – Chrisi Jun 04 '14 at 08:23

score 1 · Answer 3 · edited Mar 17 '17 at 12:42

1

HTML like this:

<button id="myButton">Click me</button>

Save this in your Javascript file, include the script at the bottom of the html page:

(function () {
    document.getElementById("myButton").onclick(function () {
         // do whatever it is you want to do after the button's been clicked
    });
}());

It shall work regardless of what JS Library you happen to be using (if any)

edited Mar 17 '17 at 12:42

Community

1
1

answered Jun 04 '14 at 08:08

Algy Taylor

814
13
29

1

NB: You don't *have* to include the function wrapper, but it's good practice to - it prevents any potential conflicts between JavaScript files. – Algy Taylor Jun 04 '14 at 08:10
Make sure to use the `var` unless you want variables to show up in the `window` object. – Ryan Jun 04 '14 at 08:13

score 1 · Answer 4 · answered Jun 04 '14 at 08:11

1

Do it like below:

<a href='linkhref.html' id='mylink'>click me</a>

<script type="text/javascript">

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;

}


</script>

answered Jun 04 '14 at 08:11

Chankey Pathak

21,187
12
85
133

Interesting way to load a script. Still, the OP seems to have a file full of functions and seems to say he doesn't really know which functions he wants to call. – Paul Jun 04 '14 at 08:18

score 0 · Answer 5 · answered Jun 04 '14 at 08:06

0

$(" the id or class of the button ").click(function(e) {

var url = "(your url)sketch2.js";
$.getScript( url, function() {

//function or something..

});

answered Jun 04 '14 at 08:06

Jonathan Nungaray

41
6

score 0 · Answer 6 · answered Jun 04 '14 at 08:07

0

This is you are looking for:

<div class="whatever" onclick="yourfunction()" >Your Button</div>

answered Jun 04 '14 at 08:07

Luís P. A.

9,524
2
23
36

score 0 · Accepted Answer · answered Jun 04 '14 at 08:12

This can all be simply handled in require.js, but here is a very simple implementation.

<div id="btn">Click to load</div>
var btn = document.getElementById('btn');
var loaded = false;
btn.addEventListener('click', function(e) {
    if(loaded) return;
    loaded = true;
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = 'sketch2.js';
    var first = document.getElementsByTagName('script')[0]; 
    first.parentNode.insertBefore(script, first);

    if(window.addEventListener) {
      script.addEventListener('load', function(e) {
        // now you can access the functions inside the JS file
      });
    } else {
      script.onreadystatechange = function() {
        if(this.readyState === "loaded" || this.readyState === "complete") {
          // access the functions in the JS file
          script.onreadystatechange = null;
        }
      };
    }
});

This code helped me. Thank you :D – user2302278 Jun 04 '14 at 08:23 — user2302278, Jun 04 '14 at 08:23

Use a button to call a javascript file in HTML

7 Answers7