i'd like to know if its possible to call several function with one html button?
<button onclick:"functions()">Calls</button>
So could anyone try to explain to me if it is possible and how and maybe show me through some code snippets or anything.
Yes it is possible, like so: This is the best option because you attach the event handler to the DOM node with javascript see this
html:
<button id="calls">Calls</button>
javascript:
document.getElementsById('calls').addEventListener('click', function(){
function1();
function2()
})
function function1() {
//whatever you want which will be called first by the button
}
function function2() {
//whatever you want which will be called second by the button
}
document.getElementById('calls').addEventListener('click', function(){ function1(); function2() }) function function1() { console.log("function1 was called first") } function function2() { console.log("function2 was called second") }
<button id="calls">Calls</button>
or so:
html:
<button onclick="function1();function2();">Calls</button>
javascript:
function function1() {
//whatever you want which will be called first by the button
}
function function2() {
//whatever you want which will be called second by the button
}
function function1() { console.log("function1 was called first") } function function2() { console.log("function2 was called second") }
<button onclick="function1();function2();">Calls</button>
or so:
html:
<button onclick="functions()">Calls</button>
javascript:
function functions() {
function1();
function2();
}
function function1() {
//whatever you want which will be called first by the button
}
function function2() {
//whatever you want which will be called second by the button
}
function functions() { function1(); function2(); } function function1() { console.log("function1 was called first") } function function2() { console.log("function2 was called second") }
<button onclick="functions()">Calls</button>
First of all, you're better off not using onclick
at all and attaching the event handler to the DOM node through your Javascript code. This is known as Unobtrusive_JavaScript .
In order to bind multiple functions to one button, you can either do this (But it is not preferred at all):
function fn(){ console.log('fn is called;'). } function fn2(){ console;log('fn2 is called.'); } function fn3(){ console.log('fn3 is called!'); }
<button onclick="fn(); fn2(); fn3();">Calls</button>
Or bind your function with addEventListener
like this (This is the most preferred approach for calling multiple functions):
document.getElementsByTagName('button')[0].addEventListener('click', function(){ fn(); fn2(); fn3(); }) function fn() { console.log('fn is called;'). } function fn2() { console;log('fn2 is called.'); } function fn3() { console.log('fn3 is called!'); }
<button>Calls</button>
You can just do that:
<button onclick="function1();function2()">Calls</button>
you can execute multiple function by order
function f1() { alert("execution of f1"); } function f2() { alert("execution of f2"); } function f3() { alert("execution of f3"); }
<button onclick="f1();f2();f3();">Click Me</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.