How to Call Multiple JavaScript Functions in Onclick Event

How to call multiple JavaScript functions in onclick event?

onclick="doSomething();doSomethingElse();"

But really, 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.

Call two functions from same onclick

Add semi-colons ; to the end of the function calls in order for them both to work.

 <input id="btn" type="button" value="click" onclick="pay(); cls();"/>

I don't believe the last one is required but hey, might as well add it in for good measure.

Here is a good reference from SitePoint http://reference.sitepoint.com/html/event-attributes/onclick

Call multiple functions onClick ReactJS

Wrap your two+ function calls in another function/method. Here are a couple variants of that idea:

1) Separate method

var Test = React.createClass({
onClick: function(event){
func1();
func2();
},
render: function(){
return (
<a href="#" onClick={this.onClick}>Test Link</a>
);
}
});

or with ES6 classes:

class Test extends React.Component {
onClick(event) {
func1();
func2();
}
render() {
return (
<a href="#" onClick={this.onClick}>Test Link</a>
);
}
}

2) Inline

<a href="#" onClick={function(event){ func1(); func2()}}>Test Link</a>

or ES6 equivalent:

<a href="#" onClick={() => { func1(); func2();}}>Test Link</a>

Is this the best way to call multiple functions with onclick in JavaScript?

Ideally, you want to use semicolons ; and line breaks.

It offers more readability and quick changes like the deletion of a line. With the appropriate line breaks and statements, you would not even need semicolons either with JS's ASI.

If you want to add even more functions, you could consider delegating the task to a function handler like this to separate your concerns:

function getFormValues() {
getInputValue();
getHoliday();
hello();
}

call multiple function with one button javascript

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>

How to call two different functions after one click of an onClick button

Just encapsulate them in a single callback:

<button id="button" type="button" onclick="reserveRoom()"> 
RESERVE ROOM
</button>

function reserveRoom() {
[write, message].forEach(x => x());
}

How to call more than one function in javascript onclick event?

I think you must wrap the content of the arrow function in { }, like this

<Button onClick={(e) => {setId(_id); handleDelete()} }>Delete</Button>

and don't forget the closing tag for the Button component

I hope that solves your problem.



Related Topics



Leave a reply



Submit