onclick event not running named function when clicked

Question

I was expecting the FBLogin onclick to run the below query, but noting is happening. What have I missed which means this isn't working as expected?

I believe this is an issue with my onlick event and not the function itself.

<a href="#" onclick="FBLogin();" 
role="button" class="btn btn-successFbLi btn-lg fa fa-facebook"</i> 
Sign in with Facebook</a></button><br>

Function

function FBLogin() {
//Fb app information//

window.fbAsyncInit = function() {
    Parse.FacebookUtils.init({
      appId      : 'xxxxxxxxx',
      xfbml      : true,
      version    : 'v2.3'
    });

//rest of function here etc//


}

the code you posted will do nothing - how do you know FBLogin isn't being executed? — Jaromanda X, Jul 05 '15 at 08:27
"But nothing is happening": does that mean the event handler is not fen called? How do you know that? What have you done to debug the issue? My guess is that the handler is called after `fbAsyncInit` was already executed. — Felix Kling, Jul 05 '15 at 08:27
@Dano007 — You keep making that assertion, but we're asking how you establish that. Why do you think it isn't being run? — Quentin, Jul 05 '15 at 08:30
`` — Use a [validator](http://validator.w3.org/nu/). You can't have an anchor inside a button. — Quentin, Jul 05 '15 at 08:32
@FelixKling fair point, how could the handler be called after fbAsyncInit though if thats within the handler? — Dano007, Jul 05 '15 at 09:20
What I meant was that the process that looks at `fbAsyncInit` and tries to call it already ran. — Felix Kling, Jul 05 '15 at 09:25
@FelixKling good point, actually that helped unpick the overall issue and it works now — Dano007, Jul 05 '15 at 09:44

Shrinivas Shukla · Accepted Answer · 2015-07-05T13:16:41.587

0

Error in the code you provided.

wrong anchor tag
extra closing tags (<i>, <button>)

The major changes I made in the code:

removed onclick attribute
added event listener in javascript

Here is the fiddle

Here is the snippet.

function FBLogin() {
  //Fb app information//
  alert("WORKING");
  window.fbAsyncInit = function() {
    Parse.FacebookUtils.init({
      appId: 'xxxxxxxxx',
      xfbml: true,
      version: 'v2.3'
    });

    //rest of function here etc//


  }
}

document.getElementById('login').addEventListener("click", FBLogin);

<a id='login' href="#" role="button" class="btn btn-successFbLi btn-lg fa fa-facebook">
Sign in with Facebook</a>

More about Event Listeners here

edited Jul 05 '15 at 13:16

answered Jul 05 '15 at 08:38

Shrinivas Shukla

4,325
2
21
33

` – Quentin Jul 05 '15 at 08:41
Care to explain why the inline event handler does not work? – Felix Kling Jul 05 '15 at 09:26
using inline event handlers should be avoided. Source : http://stackoverflow.com/a/17378538/4338417. I stopped using inline event handlers after reading this answer. – Shrinivas Shukla Jul 05 '15 at 09:49
It's true that they should be avoided, but they are not the source of all problems. You said the OP **needs** to change it, but I don't see why. Blindly changing things hoping it will fix an issue is not a reasonable approach. As you can see, your fiddle works fine with inline event handlers as well: http://jsfiddle.net/6hgk4q32/. So there is certainly no *need* to change this. – Felix Kling Jul 05 '15 at 13:14
I changed the statement in my answer. I agree that the code should not be changed blindly. Its just that when I made changes to OP's code, I used `addEventListener` approach as it makes the code a little better. – Shrinivas Shukla Jul 05 '15 at 13:20

onclick event not running named function when clicked

1 Answers1