Calling Multiple Functions onclick Javascript

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.

You can leave a response, or trackback from your own site.

6 Responses to “Calling Multiple Functions onclick Javascript”

  1. Zahid says:

    function formCheck {
    if (!fun1()) return false;
    if (!fun2()) return false;

    }

  2. [...] Calling Multiple Functions onclick Javascript | Java Script … [...]

  3. I’ve previously wrote a similar article, (though not as in depth), and have learned an awful lot from this post.multiple functions to much helpful to me
    thanks

  4. schwinn 240 recumbent exercise bike reviews, schwinn 240 recumbent exercise bike, recumbent exercise bike reviews…

    [...]Calling Multiple Functions onclick Javascript | Java Script | Vijaya Kumar Blog[...]…

  5. Kool Heads is a resource for PHP clone scripts, where all products cost only 19.95$…

    [...]Calling Multiple Functions onclick Javascript | Java Script | Vijaya Kumar Blog[...]…

  6. PHP Scripts says:

    PHP Scripts…

    [...]Calling Multiple Functions onclick Javascript | PHP/MYSQL/AJAX/SEO Tips[...]…

Leave a Reply