I am writing here to handle multiple Javascript functions in OnClick Event. To use multiple functions on Events, you want to add functions by separating with semicolon (;), For Ex: onclick = “testfun1(); testfun2();”. Each functions will run serially, first will be testfun1() and second testfun2(). To explain this functionality, I have enclosed working code below,




<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Calling Multiple Functions</title>

<script>

function fun1() {

document.getElementById(“function1″).innerHTML = “This is run by function fun1()”;

}

function fun2() {

document.getElementById(“function2″).innerHTML = “This is run by function fun2()”;

}

function fun3() {

document.getElementById(“function3″).innerHTML = “This is run by function fun3()”;

}

</script>

</head>

<body>



<div style=”cursor:pointer;”>Click me to run multiple functions through javascript parallel</div>

<div style=”color:#F00;”></div>

<div style=”color:#096;”></div>

<div style=”color:#9C3;”></div>

</body>

</html>




As per above code, once you clicked “Click me to run multiple functions through javascript parallel” link, it will runs 3 functions serially [fun1(), fun2(), fun3()]. First loads fun1() function. In fun1(), we have content as “This is run by function fun1()”. It will be loaded on div with id name function1. Second loads fun2() function. In fun2(), we have content as “This is run by function fun2()”. It will be loaded on div with id name function2. . Third loads fun3() function. In fun3(), we have content as “This is run by function fun3()”. It will be loaded on div with id name function3.




I guess you loved this tutorial. Thanks for reading.