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
<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>
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>
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>
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)
var unless you want variables to show up in the window object.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;
}
};
}
});
$(" the id or class of the button ").click(function(e) {
var url = "(your url)sketch2.js";
$.getScript( url, function() {
//function or something..
});
This is you are looking for:
<div class="whatever" onclick="yourfunction()" >Your Button</div>
