can we call two functions onClick event

Question

I am trying something like this

<div onclick="check_update('personal_details') ; showUser(2)">Click me </div>

but only check_update('personal_details') is getting called . I want to execute two separate functions at the same time when DIV is clicked. Any help will be great for me as I am still in a learning phase. Thanks in advance.

Solution 1

You can't execute two functions at the same time. JavaScript in a web browser is single threaded.

The code you have will execute the functions sequentially, providing that the first one doesn't throw an exception and terminate the execution.

If it does throw an exception then you should try to resolve that. As a brute force hack:

try {
    check_update('personal_details') ; 
} catch (e) {
    alert("Oh no! An exception! " + e);
}
showUser(2);

… but preventing the error in the first place is, obviously, a better solution!

Solution 2

You're question is tagged as jQuery, so I'm going to assume you're using it. In that case, you shouldn't be using the onclick attribute at all. This would be the correct way to write the code from a jQuery perspective:

<div id="yourId">Click me</div>

<script type="text/javascript">
$('#yourId').click(function(e) {
    e.preventDefault();
    check_update('personal_details'); 
    showUser(2);
});
</script>

Solution 3

Use a function within a closure. Replace otherFunction with the name of the second function you'd like to call and everything should work as expected.

<div onclick="(function(){check_update('personal_details'); otherFunction(); })()">Click me </div>

Comments

[Quentin]

The second function is showUser. What is the point of the anonymous, self-executing function? You aren't declaring any variables in it, so it can't be a closure.

[Quentin]

You have unbalanced ( and are missing a ; so this will syntax error.

[Elliot Bonneville]

@Quentin: "...I want to execute two separate functions", that's what this does. And from what I've learned a closure is a self-executing bit of code (for instance, inside a self executing function). Apologies if I've misunderstood. And I'll fix the syntax too, thanks for pointing that out.

[Quentin]

The code in the question executes two separate functions. This executes a different second function and wraps them in a pointless anonymous function. It isn't a closure, there are no variables being enclosed by it, it is just bloat.

[Elliot Bonneville]

@Quentin: Apologies if I've misunderstood the question. I assumed he was trying to figure out how to call two functions from within an onclick and based my answer on that. I'm still learning Javascript as well, so any input is helpful and appreciated. :)

[Quentin]

— The question does appear to be about that, but the code in the question already does that (which suggests one of the functions is erroring out and killing the script). Your code is more complex, but that complexity doesn't provide any benefit. It just means that instead of the onclick function calling one function and then another, the onclick function calls a function that calls one function and then another.

[Elliot Bonneville]

@Quentin: Ah, okay, I see what you're saying. Apologies for an incorrect answer.

[Shashi Roy]

<script> function check_update('personal_details') { ---- } function showUser(2) { ---- } </script> <div onclick="check_update('personal_details') ; showUser(2)">Click me </div> I want to implement above. Is there any way to execute both the function by clicking on the DIV .

[Elliot Bonneville]

@ShashiRoy, just take a look at Quentin's answer.