6
How to Call Multiple JavaScript Functions in onClick Event
source link: https://www.laravelcode.com/post/how-to-call-multiple-javascript-functions-in-onclick-event
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to Call Multiple JavaScript Functions in onClick Event
Use the addEventListener() Method
If you want to call or execute multiple functions in a single click event of a button, you can use the JavaScript addEventListener() method, as shown in the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Call Multiple JavaScript Functions on Click of a Button</title>
</head>
<body>
<button type="button" id="myBtn">Click Me</button>
<script>
// Defining custom functions
function sayHello(){
alert("Hello World! sayHello() function executed successfully!");
}
function sayHi(){
alert("Hi There! sayHi() function executed successfully!");
}
// Selecting button element
var btn = document.getElementById("myBtn");
// Assigning event listeners to the button
btn.addEventListener("click", sayHello);
btn.addEventListener("click", sayHi);
</script>
</body>
</html>See the tutorial on JavaScript event listeners to learn more attaching multiple event handlers.
Alternatively, you can also call more than one JavaScript function in one onclick event, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Execute Two JavaScript Function in One onClick Event</title>
</head>
<body>
<script>
// Defining custom functions
function sayHello(){
alert("Hello World! sayHello() function executed successfully!");
}
function sayHi(){
alert("Hi There! sayHi() function executed successfully!");
}
</script>
<button type="button" onclick="sayHello();sayHi();">Click Me</button>
</body>
</html>
Author : Harsukh Makwana
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Related Articles
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK