javascript - Error Uncaught TypeError: Cannot set property 'onclick' of null -

im having error on facebook javascript "uncaught typeerror: cannot set property 'onclick' of null " line 187 , line 187 is:

" button.onclick = function() {"

all code is:

<script type="text/javascript"> window.fbasyncinit = function() {   fb.init({ appid: <?php echo json_encode($this->getapikey()) ?>,          status: true,          cookie: true,         xfbml: true,         oauth: true});  fb.canvas.setsize({ width: 640, height:1500 });  //fb.canvas.setautoresize();  function updatebutton(response) {     var button = document.getelementbyid('fb-auth');      if (response.authresponse == 'null') {       //user logged in , connected       var userinfo = document.getelementbyid('user-info');      fb.api('/me', function(response) {         });        button.onclick = function() {         fb.logout(function(response) {           var userinfo = document.getelementbyid('user-info');           userinfo.innerhtml="";     });       };     } else {       //user not connected app or logged out       //button.innerhtml = 'login';       button.onclick = function() {         fb.login(function(response) { if(response.status=='connected') setlocation('<?php echo $this->getconnecturl() ?>');       if (response.authresponse) {             fb.api('/me', function(response) {           var userinfo = document.getelementbyid('user-info');           });              } else {             //user cancelled login or did not grant authorization           }          }, {scope:'email, user_birthday'});           }     }   }    // run once current status , whenever status changes   fb.getloginstatus(updatebutton);   //fb.event.subscribe('auth.statuschange', updatebutton);   };  (function() {   var e = document.createelement('script'); e.async = true;   e.src = document.location.protocol      + '//connect.facebook.net/en_us/all.js';   document.getelementbyid('fb-root').appendchild(e); }());  </script> 

if need more information tell me appreciate help. thanks!.

a quick @ code suggest button not exist when try access it:

function updatebutton(response) {     var button = document.getelementbyid('fb-auth');     //there no element id fb-auth     console.log("button now:",button); 

please put console.log in there example above after you've set button variable , before trying use , update question goes wrong.

use chrome or firefox firebug plugin see proper console.logs , press f12 open dev tools (opens console tab default).

[update]

i've removed code referring fb-auth button if code old , unused following should work:

<script type="text/javascript"> window.fbasyncinit = function() {   fb.init({ appid: <?php echo json_encode($this->getapikey()) ?>,          status: true,          cookie: true,         xfbml: true,         oauth: true});  fb.canvas.setsize({ width: 640, height:1500 });  function updatebutton(response) {     if (response.authresponse == 'null') {      //user logged in , connected      var userinfo = document.getelementbyid('user-info');      fb.api('/me', function(response) {      });     } else {   // run once current status , whenever status changes   fb.getloginstatus(updatebutton);   //fb.event.subscribe('auth.statuschange', updatebutton);   };  (function() {   var e = document.createelement('script'); e.async = true;   e.src = document.location.protocol      + '//connect.facebook.net/en_us/all.js';   document.getelementbyid('fb-root').appendchild(e); }()); </script>